javascript DOMNodeInserted 和 DOMNodeInsertedIntoDocument 有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26592645/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
what is the difference between DOMNodeInserted and DOMNodeInsertedIntoDocument?
提问by Sai
According to the DOM events in wiki found in the wiki link here,
DOMNodeInserted: Fires when a node has been added as a child of another node
DOMNodeInserted：当一个节点被添加为另一个节点的子节点时触发
DOMNodeInsertedIntoDocument: Fires when a node is being inserted into a document
DOMNodeInsertedIntoDocument：当节点被插入到文档中时触发
Now what is the real difference? Shouldn't both events be the same? If not when and where should be used?
现在真正的区别是什么？两个事件不应该是一样的吗？如果不是应该何时何地使用？
The scenario where I am using the above mentioned DOM events is that, I have a set of pages and each page loads a nav.jsp file inside a div reserved for navigation. Now I want to highlight the current page's nav tab hence I give it a small background property after that DOM element ( nav DIV) is loaded.
我使用上述 DOM 事件的场景是，我有一组页面，每个页面在为导航保留的 div 中加载一个 nav.jsp 文件。现在我想突出显示当前页面的导航选项卡，因此在加载该 DOM 元素（导航 DIV）后我给它一个小的背景属性。
Now for my problem
现在我的问题
$(document).on('DOMNodeInserted', function(e) {
if(e.target.id=="navigate"){
//...........
}
});
worked, but just curious what is the difference is between the two events specified in my question.
工作，但只是好奇我的问题中指定的两个事件之间有什么区别。
采纳答案by alchuang
The DOMNodeInsertedIntoDocumentevent is similar to the DOMNodeInsertedevent, but it occurs when a node is inserted into the document.
该DOMNodeInsertedIntoDocument事件与事件类似DOMNodeInserted，但在将节点插入文档时发生。
For example, if a node is added to an element that is not a part of the document, the DOMNodeInsertedevent is fired but the DOMNodeInsertedIntoDocumentevent is not. If the parent element of a node is inserted into the document, the DOMNodeInsertedIntoDocumentevent is fired but the DOMNodeInsertedevent is not.
例如，如果将节点添加到不属于文档的元素中，DOMNodeInserted则触发DOMNodeInsertedIntoDocument事件但不触发事件。如果节点的父元素插入到文档中，DOMNodeInsertedIntoDocument则触发DOMNodeInserted事件但不触发事件。
See JSFiddle: http://jsfiddle.net/ghyga4v6/2/
见 JSFiddle：http: //jsfiddle.net/ghyga4v6/2/
Try removing the container when text node is still there and inserting it back in to see the different events triggered.
尝试在文本节点仍然存在时移除容器并将其重新插入以查看触发的不同事件。
回答by Alan Dong
Here're two articles you can read about
这里有两篇文章你可以阅读
For example, you can insert Nodeinto BOMelement for developing browser extension or manipulate the history.
例如，您可以插入Node到BOM元件开发浏览器插件或操作的历史。
i.e. the BOMconsists of the objects navigator , history , screen , location and document which are children of window . In the document node is the DOM, the document object model, which represents the contents of the page. You can manipulate it using javascript.(From wiki)
即BOM由对象导航器、历史记录、屏幕、位置和文档组成，它们是窗口的子项。在文档节点中是DOM，文档对象模型，它代表页面的内容。您可以使用 javascript 操作它。（来自 wiki）
Here's a snippet to help, if you want to continue to learn.
如果您想继续学习，这里有一个片段可以提供帮助。
$(window).on('DOMNodeInsertedIntoDocument', function(){
console.log('DOMNodeInsertedIntoDocument occurred');
});
$(window).on('DOMNodeInserted', function(){
console.log('DOMNodeInserted occurred');
});
By the way, just for your information. MutationObserveris replacing Mutation Events.
顺便说一下，仅供您参考。MutationObserver正在取代Mutation Events。
回答by user4011114
They are not the same because the first one should also fire when adding a new node to a node that is outside of the document (created and not yet appended, or previously removed from its parent).
它们不一样，因为在将新节点添加到文档之外的节点（已创建但尚未附加，或之前从其父节点中删除）时，第一个节点也应该触发。
