刚做一个项目,某个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