Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

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也会先移除这个元素在插入这个元素,所以DOMNodeInsertedDOMNodeRemoved事件都会被触发,而Chrome上优化掉了这个操作,所以事件没有触发(我觉得这方面Firefox的行为比较正确)。
  接下来是IE上的执行结果,这里使用了IE11上的IE9模式测试:
  由于IE不支持控制台的“%c”命令,所以输出结果有点难看,不过还是能看懂的。IE对insertAdjacentHTML的处理同Chrome,对appendChild的处理同Firefox,这些处理我很赞同。但是IE会对插入元素的后代节点都触发一次DOMNodeInserted,我觉得这是不对的,或者说是IE的BUG吧。
  总之这两个事件在Chrome、Firefox、IE上都有各自的问题,使用时需要做一些特殊判断来处理。最后也希望浏览器本身能早日统一这些东西吧。
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^