刚做一个项目，某个div标签显示后 需要接收一个事件，用于主动调用 window.resize()；

从网上找了了，发现 MutationObserver。给开发者们提供了一种能在某个范围内的DOM树发生变化时作出适当反应的能力。

测试代码如下。保存成html文件即可运行

 <html>

 <head>

     <title></title>

     <script type="text/javascript" src="http://ask.csdn.net/js/jquery-1.11.1.min.js"></script>

 </head>

 <body>

      <div>

         <input type="button" value="Test" onclick="test()"/>

     </div>

     <div id="divTest" style="display:none;height:300px;width:300px;background-color:yellow">

             observer.observe(target, config);

     </div>

     <script>

         function test() {

             $('#divTest').css("display", "block");

         }

         $(function () {

             // Firefox和Chrome早期版本中带有前缀

             var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver

             // 选择目标节点

             var target = document.getElementById('divTest');

             // 创建观察者对象

             var observer = new MutationObserver(function(mutations) {

               mutations.forEach(function(mutation) {

                 alert(mutation.type);

               });

             });

             // 配置观察选项:

             var config = { attributes: true, childList: true, characterData: true }

             // 传入目标节点和观察选项

             observer.observe(target, config);

             // 随后,你还可以停止观察

             //observer.disconnect();

         });

     </script>

 </body>

 </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

html DOM 变化 通知，很好很强大的更多相关文章

  1. How Javascript works (Javascript工作原理) (十) 使用 MutationObserver 监测 DOM 变化

    个人总结: 这篇文章介绍了几种监测DOM变化的方法,重点介绍的是一个新浏览器API叫做MutationObserver. 注意:不要和Vue.js种 Object.defineProperty() 的 ...

  2. JavaScript 工作原理之十－使用 MutationObserver 监测 DOM 变化

    原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第十章. 网络 ...

  3. js动态监听dom变化

    原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑 // Firefox和Chrome早期版本中带有前缀   var MutationObserver = window.MutationO ...

  4. Javascript高级编程学习笔记（49）—— DOM2和DOM3（1）DOM变化

    DOM变化 我们知道DOM有许多的版本,其中DOM0和DOM2这两个级别以对事件的纳入标准而为人所知 但是呢,这里不讲事件,在后面会有专门和事件有关的部分作为详细讲解 这里就只讲一下DOM2和DOM3 ...

  5. MutationObserver DOM变化的观察

    简单的给MutationObserver做个测试及总结笔记. MutationObserver,window上的一个(构造)函数,可以通过其创建的观察者(观察对象)达到观察DOM的变化的效果. 可适用 ...

  6. 强大的DOM变化观察者MutationObserver

    在这之前 DOM3 提供了 Mutation events 事件 DOMAttrModified DOMAttributeNameChanged DOMCharacterDataModified DO ...

  7. Redis 数据变化通知服务实践

    从Redis 2.8.0版本起,Redis加入了“Keyspace notifications”(即“键空间通知”)的功能.键空间通知,允许Redis客户端从“发布/订阅”通道中建立订阅关系,以便客户 ...

  8. WPF 普通属性变化通知

    问题描述:使用ObservableCollection<OrderItem> source 给Datagrid.ItemsSource赋值,在后台更新source集合后,前台Datagri ...

  9. WPF绑定之索引器值变化通知

    背景 在某些应用中,需要在界面上绑定到索引器,并在值发生变化时实时更新. 解决方案 只要将包含索引器的类实现INotifyPropertyChanged接口,并在索引值更改时引发PropertyCha ...

随机推荐

  1. Myeclipse的快捷键大全

    选择你要注释的那一行或多行代码,按Ctrl+/即可,取消注释也是选中之后按Ctrl+/即可. 如果你想使用的快捷键的注释是的话,那么你的快捷键是ctrl+shift+/ 我以前都是手动注释的,直接打/ ...

  2. Jquery Mobile 百度地图 Demo

    首先非常感谢franck分享的Demo! Demo截图: 下面是franck对此Demo的说明: 原理:1.通过百度拾取坐标系统获得点位的坐标. http://api.map.baidu.com/lb ...

  3. Oracle DB 使用调度程序自动执行任务

    • 使用调度程序来简化管理任务 • 创建作业.程序和调度 • 监视作业执行 • 使用基于时间或基于事件的调度来执行调度程序作业 • 描述窗口.窗口组.作业类和使用者组的用途 • 使用电子邮件通知 • ...

  4. replace into

    讨人喜欢的 MySQL replace into 用法(insert into 的增强版) 在向表中插入数据的时候,经常遇到这样的情况:1. 首先判断数据是否存在: 2. 如果不存在,则插入:3.如果 ...

  5. 大礼包！ANDROID内存优化(大汇总)

    写在最前: 本文的思路主要借鉴了2014年AnDevCon开发者大会的一个演讲PPT,加上把网上搜集的各种内存零散知识点进行汇总.挑选.简化后整理而成. 所以我将本文定义为一个工具类的文章,如果你在A ...

  6. JavaScript中事件捕获(Event capturing)-------------->由外向内，事件冒泡(Event bubblin)---------->由内向外

    addEventListener("click", function() {}, useCapture:false); <!DOCTYPE html> <html ...

  7. iOS CocoaPods安装和使用图解

    Cocoapods安装步骤 1.升级Ruby环境 sudo gem update --system 如果Ruby没有安装,请参考 如何在Mac OS X上安装 Ruby运行环境 2.安装CocoaPo ...

  8. Java HttpClient使用小结

    httpclient是apache的一个项目:http://hc.apache.org/ 文档比較完好:http://hc.apache.org/httpcomponents-client-ga/tu ...

  9. mysql 线程级别的缓冲区

    线程栈信息使用内存(thread_stack) 主要用来存放每一个线程自身的标识信息,如线程id,线程运行时基本信息等等,我们可以通过 thread_stack 参数来设置为每一个线程栈分配多大的内存 ...

  10. 进程产生的三种方式：fork、system和exec

    1.fork()方式 fork()函数以父进程为蓝本复制一个进程,其ID号与父进程ID号不同.在Linux环境下,fork()是以写复制实现的,只有内存等与父进程不同,其他与父进程共享,只有在父进程或 ...