JavaScript变动事件详解（删除节点与插入节点事件）

本文链接：https://blog.csdn.net/TalonZhang/article/details/84454802

DOM2 级的变动（mutation）事件能在 DOM 中的某一部分发生变化时触发。
常见变动事件主要有：

DOMSubtreeModified： 在 DOM 结构发生任何变化时触发。这个事件在其他事件触发后都会触发。
DOMNodeInserted： 在一个节点作为子节点被插入到另一个节点时触发。
DOMNodeRemoved： 在节点从其父节点中被移除时触发。
DOMNodeInsertedIntoDocument： 在一个节点被直接插入文档或通过子树间接插入文档之后触发。这个事件在 DOMNodeInserted 事件之后触发。
DOMNodeRemovedFromDocument： 在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发。这个事件在 DOMNodeRemoved 事件之后触发。

使用下列代码可检测：

var isSupported = document.implementation.hasFeature("MutationEvents", "2.0");

在使用 removeChild（）或 replace（）从 DOM 中删除节点时会触发删除节点事件。

DOMNodeRemoved 事件对象属性：

DOMNodeRemovedFromDocument 事件对象属性：

DOMSubtreeModified 事件对象属性：

DOMNodeRemoved 事件触发时，节点尚未从其父节点删除，因此其 patentNode 属性仍然指向父节点（与 event.relatedNode 相同）。
DOMNodeRemoved 事件会冒泡，而 DOMNodeRemovedFromDocument 事件不会冒泡。

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset