追蹤DOM內部的變化事件

2021-11-05

之前遇到一個問題是想要擷取 dom 的加入事件，把每一筆加入的項目抽出來做額外的處理。

最一開始我傻呼呼地想要用監聽 onchange 來解決，所以把程式寫成這樣

1 2	let dom = document.querySelector("ol"); dom.addEventListener("change", callback);

想當然爾，他是沒有任何反應的。

查了一下MDN：

The change event is fired for input, select, and textarea elements when an alteration to the element’s value is committed by the user.

總之onchange不是用來監聽這種事件的。

MutationObserver

真正符合需求的是這個東西，MutationObserver。
一樣讀一下MDN，
它可以用來監聽目標的子節點是否有增減，以及目標本身屬性是否有變化。

寫起來大概像這樣

// 要監聽的目標
let target = document.querySelector("ol");

let observer = new MutationObserver((mutationList, observer) => {
  // Doing something...
});

// 開始監聽
observer.observe(target, {
  childList: true, // 監聽子節點
  attributes: false, // 監聽自身屬性變化
  subtree: false,
});

// 必要時使用disconnect結束監聽
observer.disconnect();

Namako

海參的潮間帶工作室

追蹤DOM內部的變化事件

MutationObserver