监听DOM操作事件
2017-01-11 19:34
302 查看
DOMNodeInserted 和 DOMNodeRemoved 事件
在DOM中可以通过DOMNodeInserted和DOMNodeRemoved这两个事件来监视DOM元素的插入和移除。但由于各浏览器中DOM树的处理方式不同,导致了这两个事件在各个浏览器上都有各自的特点。只要知道了这些特定,使用时做特殊处理就能暂时解决问题。以下测试是在文档对象上绑定这两个事件(它们是会冒泡的),并通执行一系列DOM树的操作:
<script> addEventListener("DOMContentLoaded",function(){ document.addEventListener("DOMNodeInserted",function(e) { console.log("insert",e.target); }); document.addEventListener("DOMNodeRemoved",function(e) { console.log("remove",e.target); }); var div=document.createElement("div"); div.innerHTML="<span>span</span>"; console.log("%cinnerHTML","color:red"); document.body.innerHTML="<div><span>span</span></div>text"; console.log("%cinsertAdjacentHTML","color:red"); document.body.insertAdjacentHTML("beforeend","<div>div</div>"); console.log("%cappendChild","color:red"); document.body.appendChild(div); document.body.appendChild(div); //重复调用 appendChild console.log("%cremoveChild","color:blue"); document.body.removeChild(div); console.log("%cinnerHTML","color:blue"); document.body.innerHTML=""; }); </script>
Firefox比Chrome的结果长了许多,首先在 insertAdjacentHTML 时它把已存在的元素都触发了一次 DOMNodeInserted 但,这些元素并没有触发 DOMNodeRemoved ,我觉得此处为Firefox的BUG。另外对于已经存在了的元素执行 appendChild ,即使位置相同Firefox也会先移除这个元素在插入这个元素,所以 DOMNodeInserted 和 DOMNodeRemoved 事件都会被触发,而Chrome上优化掉了这个操作,所以事件没有触发(我觉得这方面Firefox的行为比较正确)。
接下来是IE上的执行结果,这里使用了IE11上的IE9模式测试:
由于IE不支持控制台的“%c”命令,所以输出结果有点难看,不过还是能看懂的。IE对 insertAdjacentHTML 的处理同Chrome,对 appendChild 的处理同Firefox,这些处理我很赞同。但是IE会对插入元素的后代节点都触发一次 DOMNodeInserted ,我觉得这是不对的,或者说是IE的BUG吧。
总之这两个事件在Chrome、Firefox、IE上都有各自的问题,使用时需要做一些特殊判断来处理。最后也希望浏览器本身能早日统一这些东西吧。
相关文章推荐
- 【DOM操作】实时监听input[type='text']和HTML标签中属性改变事件
- IE与标准DOM的兼容之javascript事件监听
- jQuery 选择器、DOM操作、事件、动画
- jQuery 选择器、DOM操作、事件、动画
- 【移动GIS】如何监听地图操作事件?
- 对于原生态的addEventListener与jqueryDOM操作对于事件处理的区别
- 如何在Swing中,进行某个操作,而不触发事件监听
- dom元素操作(动态事件绑定)
- HOME键操作的事件监听
- IOS学习笔记9—IOS触摸事件监听和操作
- 从Dojo1.6到Dojo1.8(二)—— 基本模块,事件,约定,DOM操作
- 关于Dom部分操作各浏览器兼容(setAttribute 与添加事件)
- jquery中dom操作和事件的实例学习-表单验证
- jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
- IOS触摸事件监听和操作
- jQuery 选择器、DOM操作、事件、动画
- jquery常用的选择器、事件器、dom操作及执行事件
- jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
- JS之 DOM事件监听的兼容性问题 IE 和 FF
- IOS触摸事件监听和操作