[英]how to intercept innerHTML changes in javascript?
我需要攔截網頁內單元格內容的任何更改。
以下代碼顯示 addEventListener 不起作用。
function modifyText() {
alert("!");
}
var el=document.getElementById("mycell");
el.innerHTML="a"
el.addEventListener("change", modifyText, false);
// After next instruction I expect an alert message but it does not appear...
el.innerHTML="Z";
該代碼只是一個玩具示例。 在我的真實案例中,頁面中的更改(因此也在單元格中)是由我無法控制的 web 應用程序進行的。
有一種現代方法可以捕獲 innerhtml 的變化:
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe
例子:
// identify an element to observe
elementToObserve = window.document.getElementById('y-range').children[0];
// create a new instance of 'MutationObserver' named 'observer',
// passing it a callback function
observer = new MutationObserver(function(mutationsList, observer) {
console.log(mutationsList);
});
// call 'observe' on that MutationObserver instance,
// passing it the element to observe, and the options object
observer.observe(elementToObserve, {characterData: false, childList: true, attributes: false});
childList 突變觸發 innerHTML 更改。
你不能以這種方式監聽 DOM 元素的change
。 change
事件主要是針對input
的
還有一些其他新的 DOM 3 事件可以幫助您解決這個問題。
這里有一些:
似乎沒有任何 100% 跨瀏覽器解決方案,其中一種解決方法是輪詢感興趣的元素以查看它們的 innerHTML.length 是否發生變化!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.