需求
開發過程中經常遇到的一個問題就是如何監聽一個div的size變化。
比如我用canvas繪制了一個chart，當canvas的size發生變化的時候，需要重新繪制里面的內容，這個時候就需要監聽resize事件做處理。
window上雖然可以添加resize事件監聽，但這并不能滿足我們的需求，因為很多時候，div的size發生了變化，但是window的size并沒有改變。
不過我們可以間接利用window的resize事件監聽來實現對于某個div的resize事件監聽，請看下面具體實現。
對于div的resize事件的監聽，實現方式有很多，比如周期性檢查，通過scroll事件等等，本文主要介紹通過object元素來實現監聽。
具體實現
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
/** * Created by taozh on 2017/5/6. * taozh1982@gmail.com */var EleResize = { _handleResize: function (e) { var ele = e.target || e.srcElement; var trigger = ele.__resizeTrigger__; if (trigger) { var handlers = trigger.__z_resizeListeners; if (handlers) { var size = handlers.length; for (var i = 0; i < size; i++) { var h = handlers[i]; var handler = h.handler; var context = h.context; handler.apply(context, [e]); } } } }, _removeHandler: function (ele, handler, context) { var handlers = ele.__z_resizeListeners; if (handlers) { var size = handlers.length; for (var i = 0; i < size; i++) { var h = handlers[i]; if (h.handler === handler && h.context === context) { handlers.splice(i, 1); return; } } } }, _createResizeTrigger: function (ele) { var obj = document.createElement('object'); obj.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;'); obj.onload = EleResize._handleObjectLoad; obj.type = 'text/html'; ele.appendChild(obj); obj.data = 'about:blank'; return obj; }, _handleObjectLoad: function (evt) { this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__; this.contentDocument.defaultView.addEventListener('resize', EleResize._handleResize); }};if (document.attachEvent) {//ie9-10 EleResize.on = function (ele, handler, context) { var handlers = ele.__z_resizeListeners; if (!handlers) { handlers = []; ele.__z_resizeListeners = handlers; ele.__resizeTrigger__ = ele; ele.attachEvent('onresize', EleResize._handleResize); } handlers.push({ handler: handler, context: context }); }; EleResize.off = function (ele, handler, context) { var handlers = ele.__z_resizeListeners; if (handlers) { EleResize._removeHandler(ele, handler, context); if (handlers.length === 0) { ele.detachEvent('onresize', EleResize._handleResize); delete ele.__z_resizeListeners; } } }} else { EleResize.on = function (ele, handler, context) { var handlers = ele.__z_resizeListeners; if (!handlers) { handlers = []; ele.__z_resizeListeners = handlers; if (getComputedStyle(ele, null).position === 'static') { ele.style.position = 'relative'; } var obj = EleResize._createResizeTrigger(ele); ele.__resizeTrigger__ = obj; obj.__resizeElement__ = ele; } handlers.push({ handler: handler, context: context }); }; EleResize.off = function (ele, handler, context) { var handlers = ele.__z_resizeListeners; if (handlers) { EleResize._removeHandler(ele, handler, context); if (handlers.length === 0) { var trigger = ele.__resizeTrigger__; if (trigger) { trigger.contentDocument.defaultView.removeEventListener('resize', EleResize._handleResize); ele.removeChild(trigger); delete ele.__resizeTrigger__; } delete ele.__z_resizeListeners; } } }} |
測試代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Resize</title> <script src="./EleResize.js"></script> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; } #resizeDiv { width: 60%; height: 60%; border: 1px solid red; margin: 20px; } button { margin: 20px 20px 0; } </style></head><body><button onclick="addListener()">addListener</button><button onclick="removeListener()">removeListener</button><button onclick="resize()">resize</button><div id="resizeDiv"></div><script> var resizeDiv = document.getElementById('resizeDiv'); function resize() { resizeDiv.style.width = "200px"; } var listener = function () { console.log("resize"); }; function addListener() { EleResize.on(resizeDiv, listener); } function removeListener() { EleResize.off(resizeDiv, listener) }</script></body></html> |
原理
這里的具體實現分兩類，
- ie9-10
默認支持div的resize事件，可以直接通過div.attachEvent('onresize', handler);的方式實現
- 其它瀏覽器
通過在div中添加一個內置object元素實現監聽。
設置object元素的style使其填充滿div，這樣當div的size發生變化時，object的size也會發生變化。
然后監聽object元素的contentDocument.defaultView(window對象)的resize事件。
注：本文提供的是如何監聽resize事件，其實在resize時，可能會連續快速的觸發(比如拖動瀏覽器)，為了提高效率，可以考慮使用批處理的模式。
到此這篇關于JS如何監聽div的resize事件的文章就介紹到這了,更多相關JS監聽div的resize事件內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://www.cnblogs.com/zhtui/p/7059943.html
