Chrome 127 版棄用 Mutation Events

最近 Chrome 更新，導致先前寫的 JS 失效。

一、簡單說明

Mutation Events 因為過於冗長，觸發太頻繁導致拖慢速度甚至瀏覽器當機，所以建構了代替的 API MutationObserver。

從 Chrome 127 版開始，Mutation Events 支援預設改為停用。

Mutation Events 包含：

• DOMSubtreeModified
• DOMNodeInserted
• DOMNodeRemoved
• DOMNodeRemovedFromDocument
• DOMNodeInsertedIntoDocument
• DOMCharacterDataModified

二、改用 MutationObserver

舊的寫法

target.addEventListener('DOMNodeInserted', event => doSomething(event.target));

新的寫法

const observer = new MutationObserver(mutationList =>
    mutationList.filter(m => m.type === 'childList').forEach(m => {
        m.addedNodes.forEach(doSomething);
    }));
observer.observe(target, {
    childList: true,
    subtree: true
});

參考文件

• Feature: Deprecate Mutation Events
• 異動事件將從 Chrome 中移除
• MutationObserver