HTML | DOM 轮事件

在网页开发中，DOM 轮事件被广泛应用于响应用户交互。本文将介绍 DOM 轮事件的概念、应用场景以及具体操作方法。

概念

DOM 轮事件（DOM mutation events）是浏览器提供的一种事件机制，可以监听页面元素（节点）的变化。它可以捕获添加、删除、修改节点等操作，时间戳为该操作发生的时间。任何修改节点的操作都能引发 DOM 轮事件，比如修改节点属性、增删子节点等。

应用场景

DOM 轮事件可以用于多种场景，比如：

• 监听文本框内容变化
• 动态加载网页内容（比如 AJAX）
• 实现浏览器扩展程序

操作方法

监听 DOM 轮事件需要用到 MutationObserver 对象。该对象包含三个参数：

let observer = new MutationObserver(callback);

let options = {
  childList: true, // 是否监听子节点的变化
  attributes: true, // 是否监听节点属性的变化
  characterData: true, // 是否监听节点文本内容的变化
  subtree: true // 是否监听整个节点树
}

observer.observe(targetNode, options);

其中，callback 函数是当节点变化时触发的回调函数。targetNode 则表示需要监听变化的节点。

代码示例

以下代码示例演示了如何监听 DOM 轮事件，并在节点变化时打印变化信息。

<div id="parent">
  <div id="child">Hello World!</div>
</div>

<script>
let parent = document.getElementById('parent');
let observer = new MutationObserver((mutationsList, observer) => {
  for(let mutation of mutationsList) {
    let type = mutation.type;
    let target = mutation.target;
    let oldValue = mutation.oldValue;
    console.log(`Type: ${type}, Target: ${target.nodeName}, Old value: ${oldValue}`);
  }
});

observer.observe(parent, { childList: true, subtree: true });

setTimeout(() => {
  let child = document.getElementById('child');
  child.textContent = 'Hello DOM!';
  child.setAttribute('data-new', 'new data');
}, 3000);
</script>

上述代码中，我们使用 MutationObserver 监听 parent 节点和其子节点的变化。在 setTimeout 中，修改了 child 节点的文本内容和一个自定义属性，触发了 MutationObserver 的回调函数，输出了节点变化信息。

结论

DOM 轮事件是一种可以用于判断网页元素变化的 API，可以很方便地实现响应式交互体验。但是，需要注意的是过度使用监听器可能会导致性能问题，所以在使用时需要仔细考虑。