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

2024-10-14 08:36:19

需求

开发过程中经常遇到的一个问题就是如何监听一个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事件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

JS奇技之利用scroll来监听resize详解

前言大家都知道知道原生的 resize 事件只能作用于 defaultView 即 window 上,那么我们应该通过什么样的方式来监听其他元素的大小改变呢?笔者最近学习发现了一种神奇的方法,通过 scroll 事件来间接实现 resize 事件的监听,本文将对这种方式进行原理的剖析与代码实现. 原理首先,我们先来看一下 scroll 事件是干嘛的. The scroll event is fired when the document view or an element has been
JS如何监听div的resize事件详解

需求开发过程中经常遇到的一个问题就是如何监听一个div的size变化. 比如我用canvas绘制了一个chart,当canvas的size发生变化的时候,需要重新绘制里面的内容,这个时候就需要监听resize事件做处理. window上虽然可以添加resize事件监听,但这并不能满足我们的需求,因为很多时候,div的size发生了变化,但是window的size并没有改变. 不过我们可以间接利用window的resize事件监听来实现对于某个div的resize事件监听,请看下面具体实现. 对
Ajax 文件上传进度监听之upload.onprogress案例详解

$.ajax实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compati
Python脚本实现监听服务器的思路代码详解

开前准备 Schedule使用方法. 基本的Linux操作 Python3环境 Step1 首先我得先假设你会了如何每十五分钟去运行一次检查这件事情.(后期我会补上如何去做定时任务,相信我!) 代码量比较少,选择在Linux环境下直接写脚本. import os #使用os的popen执行bash命令 content=os.popen("lsof -i:8080").read() 输出一下content看看,就是命令行执行输出的内容,看关键词webcache,但是输出的已经是文本文件了
Android TextWatcher三个回调以及监听EditText的输入案例详解

TextWatcher是一个监听字符变化的类.当我们调用EditText的addTextChangedListener(TextWatcher)方法之后,就可以监听EditText的输入了. 在new出一个TextWatcher之后,我们需要实现三个抽象方法: beforeTextChanged onTextChanged afterTextChanged 看下beforeTextChanged的注释: This method is called to notify you that, with
Bootstrap滚动监听（Scrollspy）插件详解

滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标.其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class. 如果您想要单独引用该插件的功能,那么您需要引用 scrollspy.js.或者,正如 Bootstrap 插件概览一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.用法您可以向顶部导航添加滚动监听行为: 1.通过 data 属性:向您想要监听的元素(通常是
Android监听home键的方法详解

本文实例分析了Android监听home键的方法.分享给大家供大家参考,具体如下: 如何知道Home按钮被点击了呢?做launcher的时候,看源代码发现原因如果你的Activity具备这些属性 <activity android:name="com.woyou.activity.HomeActivity" android:launchMode="singleInstance" > <intent-filter> <action an
小程序使用watch监听数据变化的方法详解

众所周知,Vue中,可以使用监听属性 watch来观察和响应 Vue 实例上的数据变化,那么小程序能不能实现这一点呢? 监听器的原理,是将data中需监听的数据写在watch对象中,并给其提供一个方法,当被监听的数据的值改变时,调用该方法. 我们需要用到Javascript中的Object.defineProperty()方法,来手动劫持对象的getter/setter,从而实现给对象赋值时(调用setter),执行watch对象中相对应的函数,达到监听效果. Object.definePr
Oracle监听口令及监听器安全详解

很多Oracle用户都知道,Oracle的监听器一直存在着一个安全隐患,假如对此不设置安全措施,那么能够访问的用户就可以远程关闭监听器. 相关示例如下: D:>lsnrctl stop eygle LSNRCTL for 32-bit Windows: Version 10.2.0.3.0 - Production on 28-11月-2007 10:02:40 Copyright (c) 1991, 2006, Oracle. All rights reserved. 正在连接到 (DESCR
Android下载进度监听和通知的处理详解

本文实例为大家分享了Android下载进度监听和通知的具体代码,供大家参考,具体内容如下下载管理器关于下载进度的监听,这个比较简单,以apk文件下载为例,需要处理3个回调函数,分别是: 1.下载中 2.下载成功 3.下载失败因此对应的回调接口就有了: public interface DownloadCallback { /** * 下载成功 * @param file 目标文件 */ void onComplete(File file); /** * 下载失败 * @param e */
Springboot整合zookeeper实现对节点的创建、监听与判断的案例详解

目录 Springboot整合zookeeper教程 1.环境准备 2.代码编写 2.1.在pom.xml文件中增加zookeeper依赖(记得跟自己的zookeeper版本对应) 2.2.API测试 3.全部代码 Springboot整合zookeeper教程 1.环境准备 zookeeper集群环境一个简单的springboot项目环境不懂如何搭建zookeeper集群的小伙伴可以移步到我的另一篇文章喔,里面有详细的zookeeper集群搭建教程~ zookeeper集群搭建步骤(超详细

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

需求

具体实现

原理

相关推荐

随机推荐