追蹤DOM內部的變化事件
05 Nov 2021之前遇到一個問題是想要擷取 dom 的加入事件，把每一筆加入的項目抽出來做額外的處理。
最一開始我傻呼呼地想要用監聽 onchange 來解決，所以把程式寫成這樣
let dom = document.querySelector("ol");
dom.addEventListener("change", callback);
想當然爾，他是沒有任何反應的。
查了一下MDN：
The change event is fired for
input,select, andtextareaelements 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();
