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


Posted in Javascript onDecember 03, 2020

需求

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

测试代码:

<!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事件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
Aug 21 Javascript
用Javascript同时提交多个Web表单的方法
Dec 26 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
Aug 19 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
JavaScript经典案例之简易计算器
Aug 24 Javascript
JavaScript十大取整方法实例教程
Dec 03 #Javascript
js实现圆形菜单选择器
Dec 03 #Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 #Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 #Vue.js
微信小程序实现首页弹出广告
Dec 03 #Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 #Javascript
基于javascript实现放大镜特效
Dec 03 #Javascript
You might like
如何正确理解PHP的错误信息
2006/10/09 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
毕业生造价工程师求职信
2013/10/17 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
大学生演讲稿
2014/04/25 职场文书
单位消防安全责任书
2014/07/23 职场文书
献爱心大型公益活动策划方案
2014/09/15 职场文书
合作经营协议书范本
2014/09/16 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
湘江北去观后感
2015/06/15 职场文书
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL