如何偵測和回應 DOM 屬性變更：Mutation Events 與 MutationObserver

DOM 屬性變更事件觸發

在 Web 開發中，監控 DOM 屬性的變更對於動態 Web 應用程式至關重要。 突變事件提供了一種回應這些變化的機制。不過，它們目前已被棄用，已被 MutationObserver API 取代。

已棄用的Mutation 事件：

較舊的瀏覽器支援Mutation 事件，這允許開發人員透過特定的方式處理DOM 更改事件類型，例如「 DOMSubtreeModified」。但是，這些事件不再被視為最佳實踐。

使用 MutationObserver：

相反，檢測 DOM 屬性變更的現代方法是使用 MutationObserver API。此瀏覽器原生功能提供了一種觀察 DOM 變更並在特定屬性變更時觸發回調的方法。

用法範例：

當IMG 發生變化時觸發事件如果src 屬性發生變化，您可以使用以下程式碼：

<code class="javascript">const img = document.querySelector('img');
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.attributeName === 'src') {
      // Custom event handled here
      dispatchEvent(new CustomEvent('imageSrcChanged', { detail: mutation.newValue }));
    }
  });
});
observer.observe(img, { attributes: true });</code>

或者，您可以使用jQuery 的Mutation Events 插件等函式庫來簡化DOM 突變事件的實現，確保與舊瀏覽器的兼容性，同時利用適用於現代瀏覽器的MutationObserver API。

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