剛做一個項目，某個div標簽顯示后 需要接收一個事件，用於主動調用 window.resize()；
從網上找了了，發現 MutationObserver。給開發者們提供了一種能在某個范圍內的DOM樹發生變化時作出適當反應的能力。
測試代碼如下。保存成html文件即可運行
1 <html> 2 <head> 3 <title></title> 4 <script type="text/javascript" src="http://ask.csdn.net/js/jquery-1.11.1.min.js"></script> 5 </head> 6 <body> 7 <div> 8 <input type="button" value="Test" onclick="test()"/> 9 </div> 10 11 <div id="divTest" style="display:none;height:300px;width:300px;background-color:yellow"> 12 13 observer.observe(target, config); 14 </div> 15 <script> 16 function test() { 17 $('#divTest').css("display", "block"); 18 } 19 $(function () { 20 // Firefox和Chrome早期版本中帶有前綴 21 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver 22 23 // 選擇目標節點 24 var target = document.getElementById('divTest'); 25 26 // 創建觀察者對象 27 var observer = new MutationObserver(function(mutations) { 28 mutations.forEach(function(mutation) { 29 alert(mutation.type); 30 }); 31 }); 32 33 // 配置觀察選項: 34 var config = { attributes: true, childList: true, characterData: true } 35 36 // 傳入目標節點和觀察選項 37 observer.observe(target, config); 38 39 // 隨后,你還可以停止觀察 40 //observer.disconnect(); 41 }); 42 </script> 43 </body> 44 </html>
在實際用的過程中 這一步 observer.observe(target, config);報了下面的錯誤
Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
原來是 我用的jquery選擇器，$("#divTest"),這樣出來的結果是數據
而observer.observe(target, config);方法需要的是一個節點。
相關：
http://www.cnblogs.com/snandy/archive/2016/04/10/5362824.html
https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver