JS如何監聽div的resize事件詳解
阿新 • • 發佈:2020-12-06
需求
開發過程中經常遇到的一個問題就是如何監聽一個div的size變化。
比如我用canvas繪製了一個chart,當canvas的size發生變化的時候,需要重新繪製裡面的內容,這個時候就需要監聽resize事件做處理。
window上雖然可以新增resize事件監聽,但這並不能滿足我們的需求,因為很多時候,div的size發生了變化,但是window的size並沒有改變。
不過我們可以間接利用window的resize事件監聽來實現對於某個div的resize事件監聽,請看下面具體實現。
對於div的resize事件的監聽,實現方式有很多,比如週期性檢查,通過scroll事件等等,本文主要介紹通過object元素來實現監聽。
具體實現
/** * Created by taozh on 2017/5/6. * [email protected] */ 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,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,context) { var handlers = ele.__z_resizeListeners; if (handlers) { EleResize._removeHandler(ele,context); if (handlers.length === 0) { ele.detachEvent('onresize',EleResize._handleResize); delete ele.__z_resizeListeners; } } } } else { EleResize.on = function (ele,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); 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; } } } }
測試程式碼:
<!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事件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!