DOM 屬性更改時觸發事件
許多場景需要偵測DOM 屬性的更改，例如當影像的來源變更或div 的HTML 變更時內容更新。瀏覽器對此功能的支援隨著時間的推移而不斷發展。
DOM 突變事件（舊版）
過去，DOM 突變事件提供了一種監聽屬性變更的方法。這些事件包括：
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>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>以上是如何偵測和回應 DOM 屬性變更：MutationObserver 與傳統方法？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
