原生Js监听普通dom尺寸变化

具体做法有以下几种：

  1. 初始化项目后，轮询，反复查看 dom 尺寸是否变化，这种一听就感觉不好，开销太大。
  2. 监听元素的滚动事件，在 目标 dom 里面包裹一个同等大小的 div，是隐藏不可见的，当目标 dom 大小变化时，触发滚动事件。参考文章
  3. 通过 MutationObserver 监听dom 节点变化，MutationObserver 是在DOM4规范中定义的，它的前身是 MutationEvent 事件，该事件最初在 DOM2 事件规范中介绍，到来了 DOM3 事件规范中正式定义，但是由于该事件存在兼容性以及性能上的问题被弃用；可以用它来监听 dom style 的变化, demo 代码，文档
<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

</head>

<body>

	<div id="demo" style="background: blue; height: 200px; width: 100%">

		demo 内容

	</div>

	<script>

		var observer = new MutationObserver(function (mutations, observer) {

		    mutations.forEach(function (mutation) {

		        console.log(mutation);

		    });

		});

		var config = {

		    attributes: true,

		    attributeOldValue: true,

		    attributeFilter: [

		        'style'

		    ]

		};

		var el = document.getElementById('demo');

		observer.observe(el, config);

	</script>

</body>

</html>
  1. Ie9-10 默认支持 div 的 resize 事件，可以直接通过 div.attachEvent('onresize', handler); 的方式实现;其它浏览器,通过在 div 中添加一个内置 object 元素实现监听,设置 object 元素的 style 使其填充满 div，这样当 div 的 size 发生变化时，object 的 size 也会发生变化,然后监听 object 元素的 contentDocument.defaultView(window对象)的 resize 事件。参考文章
总结：简单记录，以作备忘

原生Js监听普通dom尺寸变化的更多相关文章

  1. 原生js监听input值改变事件

    哈哈哈,又来了,今天闲来无事,实验了下原生js监听input value值改变事件,下面就来说道说道: 本来写监听input值便获是用jquery的,之前的随笔写了,就是这个方法,地址:http:// ...

  2. 原生js监听input值发生变化

    原生JS中可以使用oninput,onpropertychange,onchange oninput,onpropertychange,onchange的用法 1) onchange 触发事件必须满足 ...

  3. javascript 原生方法监听DOM结构改变事件

    js原生方法监听DOM结构改变事件 document.addEventListener('DOMNodeInserted',function(){alert(1)},false);document.a ...

  4. js 监听整个页面的回车事件

    JS监听整个页面的回车事件 <script type="text/javascript"> document.onkeydown=keyDownSearch;      ...

  5. 原 JS监听回车事件

    原 JS监听回车事件 发表于2年前(2014-06-04 10:16)   阅读(6101) | 评论(0) 11人收藏此文章, 我要收藏 赞0 1月16日厦门 OSC 源创会火热报名中,奖品多多哦  ...

  6. js监听输入框值的即时变化onpropertychange、oninput

    js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // //   要达到的效果 ...

  7. js监听用户的键盘敲击事件，兼容各大主流浏览器

    js监听用户的键盘敲击事件,兼容各大主流浏览器 <script type="text/javascript"> document.onkeydown = functio ...

  8. JS监听组合按键

    有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制.粘贴等等. 下面简单梳理一下思路: 我们所熟悉的按键有这么集中类型: 单独的按键操作,如:delete ...

  9. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

随机推荐

  1. <Linux> Xen虚拟机镜像的安装

    了解系统安装在哪个磁盘上:fdisk -l 建立存放虚拟机镜像的目录:mkdir /mnt/vmx 更改文件系统格式: mkfs -t ext4 /dev/sda或者/dev/sdb(系统不在的那个硬 ...

  2. IE浏览器下css hack

    \9    :所有IE浏览器都支持 _和-  :仅IE6支持 *     :IE6.IE7支持 \0    :IE8.IE9支持 \9\0  :IE8部分支持.IE9支持 \0\9  :IE8.IE9 ...

  3. Objective-C编码规范[译]

    原文链接 : The official raywenderlich.com Objective-C style guide 原文作者 : raywenderlich.com Team 译文出自 : r ...

  4. Oracle 自己主动内存參数依赖性

    图例:在该图中使用了下面參数名称缩写: MT = MEMORY_TARGET MMT = MEMORY_MAX_TARGET ST = SGA_TARGET PAT = PGA_AGGREGATE_T ...

  5. NOIP模拟 乘积 - 状压dp + 分组背包

    题目大意: 给出n和k,求从小于等于n的数中取出不超过k个,其乘积是无平方因子数的方案数.无平方因子数:不能被质数的平方整除. 题目分析: 10(枚举\(n\le8\)),40(简单状压\(n\le1 ...

  6. HDU 1224 Free DIY Tour - 最短路

    传送门 题目大意: 一个有向图(n + 1相当于1),每个点有一个权值(可以认为1和n+1权值为0),求从1走到n+1(相当于走回1)的最大路径权值和是多少,输出方案. 题目分析: 最短路问题,输出方 ...

  7. hadoop 3.x 单机集群配置/启动时的问题处理

    一.修改配置文件(hadoop目录/etc/hadoop/配置文件) 1.修改hadoop-env.sh,指定JAVA_HOME 修改完毕后 2.修改core-site.xml <configu ...

  8. Android高度仿新浪微博引导页面

    在写这一篇文章之前,先向大家推荐一篇博文:http://blog.csdn.net/dawanganban/article/details/17297671 感谢这位博主,我在该博主的基础上完成了对新 ...

  9. qmake生成vcproj & sln

    qmake生成的vs工程与环境变量中的 qmakespec相关,可以有两种方法: 1.默认情况下,即环境变量qmakespec为你装的qt for vs的版本,默认生成的为该版本的vs工程,如,你装的 ...

  10. Spring中的Interceptor 拦截器 专题

    spring-webmvc-4.3.14.RELEASE.jar org.springframework.web.servlet.DispatcherServlet#doDispatch /** * ...