事件捕捉的Mutation Observer

在浏览器的世界里，DOM（文档对象模型）是一个非常重要的概念，它了 HTML 和 XML 文档的结构，并为我们提供了操作这些文档的方法和接口。DOM 变动是指 DOM 结构的任何改变，包括节点的插入、删除、更新等操作。

Mutation Events 是浏览器提供的一组事件，可以用来监听 DOM 变动。这些事件包括 DOMSubtreeModified、DOMNodeInserted、DOMNodeRemoved、DOMNodeRemovedFromDocument、DOMNodeInsertedIntoDocument、DOMAttrModified 等。

Mutation Events 的优势在于它可以监听 DOM 的任何变动，包括那些不会触发其他事件的变动。例如，当一个节点的属性发生变化时，不会触发任何事件，但 Mutation Events 可以监听属性的变化。

Mutation Events 的缺点在于它对浏览器的兼容性不是很好，只有较新的浏览器才支持 Mutation Events。另外，Mutation Events 的事件处理函数在某些情况下可能会被浏览器忽略。

Mutation Observer 是 Mutation Events 的替代方案，它可以通过 MutationCallback 来控制回调函数的执行。Mutation Observer 的优势在于它对浏览器的兼容性更好，并且不会被浏览器忽略。

Mutation Observer 的基本使用方式如下：

1. 创建一个 MutationObserver 实例。
2. 调用 MutationObserver 实例的 observe() 方法来观察一个或多个目标节点。
3. 当目标节点发生变动时，Mutation Observer 实例会调用其回调函数。

Mutation Observer 的回调函数有两个参数：

• mutationRecords：一个包含 MutationRecord 对象的数组。每个 MutationRecord 对象了一个 DOM 变动。
• observer：触发回调函数的 MutationObserver 实例。

MutationRecord 对象有三个属性：

• type：一个字符串，表示 DOM 变动的类型。
• target：一个节点，表示 DOM 变动发生的目标节点。
• addedNodes：一个包含新插入节点的数组。
• removedNodes：一个包含已删除节点的数组。
• previousSibling：一个节点，表示目标节点的前一个兄弟节点。
• nextSibling：一个节点，表示目标节点的下一个兄弟节点。

Mutation Observer 可以用来实现各种 DOM 变动侦听效果。例如，我们可以使用 Mutation Observer 来实现以下效果：

• 监听 DOM 元素的属性变化。
• 监听 DOM 元素的文本内容变化。
• 监听 DOM 元素的插入和删除。
• 监听 DOM 元素的移动。
• 监听 DOM 元素的样式变化。

Mutation Observer 是一个非常强大的工具，可以用来实现各种 DOM 变动侦听效果。它比 Mutation Events 更兼容，更可靠。