追蹤DOM內部的變化事件


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

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

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();
Hi 喜歡這篇文章的話 或許可以請我喝杯咖啡
Buy me a coffeeBuy me a coffee