當DOM改變時的JavaScript事件監聽器

我正在編寫一個Mozilla Firefox擴展（Javascript沒有必須識別它是IE還是Firefox的BS），在那裏我發現自己被困在以下情況。在一個頁面加載，我添加事件監聽器，像這樣： extension.addEventListener("DOMContentLoaded", extension.onPageLoad, true);當DOM改變時的JavaScript事件監聽器

這將立即執行M「的onPageLoad（）」方法爲DOM被加載，這意味着所有的數據被接收。並且，這工作，但我需要找到一種方式來添加一個偵聽器，當DOM 更改。擴展應該讀取appbrowser-window中的所有數據，即使通過AJAX調用進行更新（即：twitter，facebook）。

我進去看了DOMSubtreeModified事件，但似乎沒有內容時動態添加後的初始DOMContentLoaded事件已經被炒到工作。

有沒有人克服過這個問題？我的替代方案（上帝原諒我）是保持發射相同的函數與超時（2秒），重新讀取DOM和解析它，但我更喜歡只有這樣做，如果它實際上改變。

來源

2011-03-14 Mojah

（我知道它的一個老問題）順便說一句，你也應該加油門。 – 2011-09-09 14:08:47

聽起來好像您在尋找DOM Mutation Events。雖然DOMSubtreeModified列出在WikiPedia page，我沒有看到它在MDC頁面上。最好的辦法是聽三個MDC事件，看他們是否做你需要的。

來源

2011-03-14 22:56:11

DOMSubtreeModified一直在爲我工作 – Jage 2011-03-14 23:02:58

@Jage：適用於通過Ajax動態插入元素？如果我通過簡單的控制檯日誌記錄使用DOMSubtreeModified，則除了初始頁面解析之外，不會獲得其他結果。 – Mojah 2011-03-14 23:12:03

什麼瀏覽器？我正在使用它來專門檢測ajax的變化。我只在FF和鉻測試，以公平。 – Jage 2011-03-14 23:18:02

DOMSubtreeModified確實有效，並已得到相當好的支持（Firefox和WebKit已經支持它多年，IE只在版本9中，Opera顯然還沒有）。關於DOMContentLoaded是否已經解僱沒有限制，所以我建議你的測試是有缺陷的。看到這裏的一個例子：http://jsfiddle.net/timdown/GB6Rz/

其他DOM突變事件，如DOMNodeInserted更好的支持（雖然仍然沒有在IE < 9），所以我會建議使用那些儘可能。

來源

2011-03-14 23:17:06

似乎我的事件處理程序確實存在問題，因爲它現在可用於Facebook上的動態加載內容，但出於某種瘋狂的原因，它並未在Twitter中提供任何結果。我在頁面加載時發現了十幾個HTML元素（只是它們的主體），並且當AJAX調用重新加載主體時，我看到了不同的DOMSubtreeModified消息，但沒有添加事件。我是否有權假定在我的事件處理程序中，我仍然可以使用'aEvent.originalTarget'來獲取當前文檔函數（aEvent））？ – Mojah 2011-03-16 21:59:52

對於任何在2017年或以後發現此問題的人，這些DOM修改事件已被棄用。你想要的是MutationObserver。

查看MDN上的MutationObserver docs，或this SO answer瞭解更多詳情。

來源

2017-03-29 11:38:10 jdunk

當DOM改變時的JavaScript事件監聽器

回答

相關問題