原生Js监听普通dom尺寸变化
原生Js监听普通dom尺寸变化
具体做法有以下几种：
- 初始化项目后，轮询，反复查看 dom 尺寸是否变化，这种一听就感觉不好，开销太大。
- 监听元素的滚动事件，在 目标 dom 里面包裹一个同等大小的 div，是隐藏不可见的，当目标 dom 大小变化时，触发滚动事件。参考文章
- 通过 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>
- Ie9-10 默认支持 div 的 resize 事件，可以直接通过 div.attachEvent('onresize', handler); 的方式实现;其它浏览器,通过在 div 中添加一个内置 object 元素实现监听,设置 object 元素的 style 使其填充满 div，这样当 div 的 size 发生变化时，object 的 size 也会发生变化,然后监听 object 元素的 contentDocument.defaultView(window对象)的 resize 事件。参考文章
总结：简单记录，以作备忘
原生Js监听普通dom尺寸变化的更多相关文章
- 原生js监听input值改变事件
哈哈哈,又来了,今天闲来无事,实验了下原生js监听input value值改变事件,下面就来说道说道: 本来写监听input值便获是用jquery的,之前的随笔写了,就是这个方法,地址:http:// ...
- 原生js监听input值发生变化
原生JS中可以使用oninput,onpropertychange,onchange oninput,onpropertychange,onchange的用法 1) onchange 触发事件必须满足 ...
- javascript 原生方法监听DOM结构改变事件
js原生方法监听DOM结构改变事件 document.addEventListener('DOMNodeInserted',function(){alert(1)},false);document.a ...
- js 监听整个页面的回车事件
JS监听整个页面的回车事件 <script type="text/javascript"> document.onkeydown=keyDownSearch; ...
- 原 JS监听回车事件
原 JS监听回车事件 发表于2年前(2014-06-04 10:16) 阅读(6101) | 评论(0) 11人收藏此文章, 我要收藏 赞0 1月16日厦门 OSC 源创会火热报名中,奖品多多哦 ...
- js监听输入框值的即时变化onpropertychange、oninput
js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // // 要达到的效果 ...
- js监听用户的键盘敲击事件，兼容各大主流浏览器
js监听用户的键盘敲击事件,兼容各大主流浏览器 <script type="text/javascript"> document.onkeydown = functio ...
- JS监听组合按键
有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制.粘贴等等. 下面简单梳理一下思路: 我们所熟悉的按键有这么集中类型: 单独的按键操作,如:delete ...
- js监听input等表单输入框的变化事件oninput
js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...
随机推荐
- js实现md5加密sha1加密等
1.base64加密 在页面中引入base64.js文件,调用方法为: <!DOCTYPE HTML> <html> <head> <meta charset ...
- xp2p系统的10点技术创新和经验总结
最近在开发完善九天鸟的xp2p系统,解决了很多技术问题,特此总结下. 第一个项目开发,非常重要,它对建立开发规范.团队协作.开发效率,有很重大的意义. 1.分页前台AJAX异步分页,用咱们自己的fup ...
- 【u004】数列
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 有这样一种数列A1.A2.A3.--An,其中A1=0,且对任意一项Ai满足|Ai-A(i+1)|=1 ...
- iptables 重启系统生效
1. 重启系统生效 开启: chkconfig iptables on 关闭: chkconfig iptables off 2. 即时生效,重启后失效 开启: service iptables ...
- Mybatis找不到参数错误：There is no getter for property named 'categoryId' in 'class java.lang.Integer'。
Mybatis找不到参数错误:There is no getter for property named 'categoryId' in 'class java.lang.Integer'. 错误Li ...
- Python爬虫突破封禁的6种常见方法
转 Python爬虫突破封禁的6种常见方法 2016年08月17日 22:36:59 阅读数:37936 在互联网上进行自动数据采集(抓取)这件事和互联网存在的时间差不多一样长.今天大众好像更倾向于用 ...
- Xcode7 不能使用http网络请求问题解决
最近使用Xcode 7.0 写代码,发送网路请求提示: App Transport Security has blocked a cleartext HTTP (http://) resource ...
- javaScript实现简单网页倒计时代码
<div id="button"> <input type="button" value="同意" id="b0 ...
- Android Activity 悬浮 半透明边框
1.首先来创建一个Activity,在Activity的OnCreate函数里面我们设置它为全屏,然后设置Activity的宽高为全屏*0.9,然后设置背景图片为半透明的 .9 图片 .这样就已经是非 ...
- Leetcode--easy系列1
近期開始刷Leetcode题目.花了一个星期先完毕了easy难度级别的题目,easy级别的题目思路比較简单,但不一定就直接AC了,主要是问题要考虑全然.特别是对特殊情况的处理. #6 ZigZag C ...