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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
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上都有各自的问题，使用时需要做一些特殊判断来处理。最后也希望浏览器本身能早日统一这些东西吧。
|
