原生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. HPE Comware Lab - Simulator

    http://h20565.www2.hpe.com/hpsc/swd/public/readIndex?sp4ts.oid=7107838&ac.admitted=1405352934644 ...

  2. pycharm highlight

    https://www.jetbrains.com/help/pycharm/2017.1/highlighting-usages.html Highlighting usages in the cu ...

  3. Spring mvc 多文件上传

    http://blog.csdn.net/swingpyzf/article/details/20230865

  4. wait()、notify()、notifyAll()与线程通信方式总结

    1.通过wait().notify().notifyAll()进行线程通信 线程通信的目标是使线程间能够互相发送信号.另一方面,线程通信使线程能够等待其他线程的信号.例如,线程B可以等待线程A的一个信 ...

  5. java读取.properties文件乱码

    1.config.properties文件写不进中文,写进去都变成了unicode,解决的方法是右键该文件--Properties--Resource--Text file encoding ,选ot ...

  6. 一起学Python：列表介绍

    列表介绍 想一想: 前面学习的字符串可以用来存储一串信息,那么想一想,怎样存储咱们班所有同学的名字呢? 定义100个变量,每个变量存放一个学生的姓名可行吗?有更好的办法吗? 答: 列表 <1&g ...

  7. Java中如何拼接sql或者其他含有变量语句

    本原则是个人感悟(不保证完全正确) 第一条原则,首先将一条完整的字符串写好.(例如是"select * from users where id=(id+1)") 凡是变量都需要在其 ...

  8. gradle命令学习

    概述 命令学习比较枯燥,全部是例子~ gradle版本 假设你的本地gradle已经安装配置完成.没有安装配置的,可以参考 gradle安装 C:\Users\yueling.DANGDANG> ...

  9. 如何在华为云软件开发云上运行Python

    一． 华为云软件开发云与Python 1. 华为云软件开发云简介 华为云软件开发云(DevCloud)是集华为近30年研发实践,前沿研发理念,先进研发工具为一体的一站式云端DevOps平台,面向开发者 ...

  10. Windows下快速搭建安卓开发环境android-studio

    Windows下快速搭建安卓开发环境android-studio 发布时间:2018-01-18 来源:网络 上传者:用户 关键字: 安卓 搭建 Android Windows 快速 环境 Studi ...