如何偵測和回應 DOM 屬性變更：MutationObserver 與傳統方法？

DOM 屬性更改時觸發事件

許多場景需要偵測DOM 屬性的更改，例如當影像的來源變更或div 的HTML 變更時內容更新。瀏覽器對此功能的支援隨著時間的推移而不斷發展。

DOM 突變事件（舊版）

過去，DOM 突變事件提供了一種監聽屬性變更的方法。這些事件包括：

• DOMAttrModified
• DOMNodeInserted
• DOMNodeRemoved

但是，瀏覽器對相關，導致事件的支援，已於2012 年棄用。

MutationObserver API

作為 DOM 突變事件的替代品，引入了 MutationObserver API。 MutationObserver 提供了一種更強大且廣受支援的方法來偵測 DOM 屬性和 DOM 其他方面的變更。

使用 MutationObserver，您可以建立觀察者實例並指定要監視的變更類型。當 DOM 中發生任何符合的變更時，觀察者將通知您。

以下是如何使用MutationObserver 偵測影像來源屬性變更的範例：

<code class="javascript">// 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"] });</code>

在此範例中，觀察者被配置為監視影像節點的src 屬性，並在該屬性發生更改時調用指定的回調。

jQuery Mutation Events Plugin

如果您使用 jQuery 時，您可以利用其 Mutation Events 外掛程式作為 MutationObserver 的替代品。該外掛提供了一個處理 DOM 屬性變更的簡化介面，如果您只對特定屬性變更感興趣，該外掛程式會非常有用。

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

透過利用 MutationObserver 或 jQuery Mutation Events 插件，您可以有效地偵測變更在 DOM 屬性中並執行自訂操作來回應這些變更。

以上是如何偵測和回應 DOM 屬性變更：MutationObserver 與傳統方法？的詳細內容。更多資訊請關注PHP中文網其他相關文章！