Question

根据wiki中的DOM事件找到in the wiki link here，

DOMNodeInserted：将节点添加为另一个节点的子节点时触发

DOMNodeInsertedIntoDocument：将节点插入文档时触发

现在真正的区别是什么？两个事件不应该相同吗？如果不是何时何地应该使用？

我使用上述DOM事件的场景是，我有一组页面，每个页面都在为导航保留的div中加载nav.jsp文件。现在我想突出显示当前页面的nav选项卡，因此在加载DOM元素（nav DIV）之后我给它一个小的背景属性。

现在我的问题

$(document).on('DOMNodeInserted', function(e) { 
      if(e.target.id=="navigate"){
      //...........
      }
 });

工作，但只是好奇我的问题中指定的两个事件之间的区别是什么。

Answer 1

DOMNodeInsertedIntoDocument事件类似于DOMNodeInserted事件，但是当节点插入到文档中时会发生。

例如，如果将节点添加到不属于文档一部分的元素，则会触发DOMNodeInserted事件，但DOMNodeInsertedIntoDocument事件不会被触发。如果将节点的父元素插入到文档中，则会触发DOMNodeInsertedIntoDocument事件，但不会发生DOMNodeInserted事件。

参见JSFiddle：http://jsfiddle.net/ghyga4v6/2/

尝试在文本节点仍然存在时移除容器并将其重新插入以查看触发的不同事件。

Answer 2

以下是您可以阅读的两篇文章

DOMNodeInsertedIntoDocument event
DOMNodeInserted event

例如，您可以将Node插入BOM元素以开发浏览器扩展程序或操纵历史记录。

即。 BOM 包含作为窗口子项的对象导航器，历史记录，屏幕，位置和文档。在文档节点中是DOM，即文档对象模型，它表示页面的内容。你可以使用javascript来操作它。（来自wiki）

如果你想继续学习，这里有一个帮助片段。

$(window).on('DOMNodeInsertedIntoDocument', function(){
  console.log('DOMNodeInsertedIntoDocument occurred');
});

$(window).on('DOMNodeInserted', function(){
  console.log('DOMNodeInserted occurred');
});

顺便说一句，仅供参考。 MutationObserver正在取代Mutation Events。

Answer 3

它们不相同，因为在向文档外部的节点添加新节点时（创建但尚未附加或先前从其父节点中删除），第一个节点也应该触发。

DOMNodeInserted和DOMNodeInsertedIntoDocument有什么区别？

3 个答案: