DOM 属性变化触发事件

很多场景需要检测 DOM 属性的变化，比如图片来源变化或者 div 的 HTML 变化内容更新。浏览器对此功能的支持随着时间的推移而不断发展。

DOM 突变事件（旧版）

过去，DOM 突变事件提供了一种侦听属性更改的方法。这些事件包括：

• DOMAttrModified
• DOMNodeInserted
• DOMNodeRemoved

但是，浏览器对 DOM Mutation 事件的支持不一致，导致已于 2012 年弃用。

MutationObserver API

作为 DOM Mutation Events 的替代品，引入了 MutationObserver API。 MutationObserver 提供了一种更强大且得到广泛支持的方法来检测 DOM 属性和 DOM 其他方面的更改。

使用 MutationObserver，您可以创建观察者实例并指定要监视的更改类型。当 DOM 中发生任何匹配的更改时，观察者将通知您。

以下是如何使用 MutationObserver 检测图像源属性更改的示例：

// Create an observer instance
const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    // Check if the mutation is for the "src" attribute
    if (mutation.attributeName === "src") {
      // Do something in response to the source change
    }
  }
});

// Start observing the specified target node
observer.observe(image, { attributes: true, attributeFilter: ["src"] });

在本例中，观察者被配置为监视图像节点的 src 属性，并将调用指定的回调

jQuery Mutation Events 插件

如果您使用 jQuery，您可以利用其 Mutation Events 插件作为 MutationObserver 的替代品。该插件提供了一个用于处理 DOM 属性更改的简化界面，如果您只对特定属性更改感兴趣，则该插件非常有用。

$(image).on("DOMAttrModified", (event) => {
  if (event.attrName === "src") {
    // Do something in response to the source change
  }
});

通过利用 MutationObserver 或 jQuery Mutation Events 插件，您可以有效地检测 DOM 属性中的更改并执行自定义操作来响应这些更改。