JS如何监听div的resize事件详解

SEO优化专员 • 2025年1月4日 00:48:47 • 编程技术 • 阅读 2

这篇文章主要给大家介绍了关于JS如何监听div的resize事件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

需求

开发过程中经常遇到的一个问题就是如何监听一个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.
* 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;
   }
}
}
}