原生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的话是无法监听到输入法输入的文本变 ...
随机推荐
- Java中a=a+b 与 a+=b差别
一般觉得a=a+b的运行效率是低于a+=b的,由于它多进行了一步中间变量的操作,并且会多占用一个变量的空间.而Java编译器默认对其进行了优化,优化之后两条语句都当做 a+=b来运行了,所以实际上是没 ...
- sqoop 1.4.7 安装配置/连接测试
环境: hadoop2.7.7 mysql 8 zk 3.4.10 hive 3 1.上传并解压tar包后进入conf目录 拷贝sqoop-env-template.sh并重命名为sqoop-env. ...
- Linux下安装mysql(1)(CentOS)
标题是(1)也就是说这次是基础安装,这种方式安装,没有组的创建,权限管理,配置文件更改等,仅仅是最基本的安装,适合第一次在linux上安装mysql的新手 1.准备好安装包(Linux-Generic ...
- Notepad++中删除连续的任意n行
使用Notepad++里的行标记功能,可以删除指定的任意n行. 案例1,删除sample2.dat里的第201行到第10000行.方法如下: (1) 用户NotePad++打开sample2.dat, ...
- Ubuntu 16.04安装MinGW32（在/etc/apt/sources.list里添加源）
Ubuntu 16.04下直接使用命令安装MinGW32: sudo apt-get install mingw32 但是,会报错: Unable to locate package mingw3 ...
- ES数据
通过Elasticsearch使用的你的数据 Elasticsearch 系列导航 elasticsearch 与 elasticsearch-head 的安装 ElasticSearch Index ...
- Struts2——（7）拦截器组件
AOP:面向切面编程(通过配置文件来指定作用到目标对象) OOP:面向对象编程 AOP具有很好的可插拔特性,很灵活. 可用于封装共通的业务处理,之后可以通过配置作用到Action组件上. 共通的业务处 ...
- Android显示gif格式图片
大家知道,在Android中使用ImageView来显示gif格式的图片,我们无法得到gif格式图片该有的效果,它只会停在第一帧上,而不会继续.这时只能看到一张静态的图片,这里我们可以使用个简单的方法 ...
- delphi json uLkJSON
delphi 7 json 做个笔记,留着以后用 --源码 unit Umain; interface uses Windows, Messages, SysUtils, Variants, Clas ...
- 关于ExpandableListView的一个小例子
喜欢显示好友QQ那样的列表,可以展开,可以收起,在android中,以往用的比较多的是listview,虽然可以实现列表的展示,但在某些情况下,我们还是希望用到可以分组并实现收缩的列表,那就要用到an ...