DOM屬性變化時如何觸發事件？

屬性變更事件處理

當 DOM 屬性變更時是否可以啟動事件？例如，當圖像的來源或分區的內部 HTML 被修改時？

突變事件提供了此問題的解決方案。雖然瀏覽器對這些事件的支援有限，但它們提供了一種監視屬性變更的方法。

具體來說，您可以利用 MutationObserver 介面來取代 Mutation 事件。 MutationObserver 提供了一種更標準化、更可靠的方法來觀察 DOM 更改，包括屬性修改。

以下是如何使用MutationObserver 在屬性變更時觸發自訂事件：

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'attributes') {
      const element = mutation.target;
      const attributeName = mutation.attributeName;
      const oldValue = mutation.oldValue;
      const newValue = mutation.newValue;

      // Trigger custom event with relevant information
      element.dispatchEvent(new CustomEvent('attributeChanged', {
        detail: {
          attributeName,
          oldValue,
          newValue
        }
      }));
    }
  });
});

// Observe the DOM element for attribute changes
observer.observe(document.querySelector('#myElement'), { attributes: true });

透過使用MutationObserver，您可以有效追蹤屬性變更並相應地發起自訂事件，從而可以回應動態DOM 修改。

以上是DOM屬性變化時如何觸發事件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！