addeventlistener怎么监听变量的变化_MutationObserver: dom变化监听 给你代码

如何来监听dom变化？

工作中突然有一个需求，必须你要监听dom的插入，那么就需要去监听dom变化。在一般印象中，监听事件应该是这么实现的比如 xx.addEventListener(xxx)。而实际上关于这个dom变化有一套html5标准。如在mdn写到MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品，该功能是DOM3 Events规范的一部分。

使用方法 var observer = new MutationObserver(callback); 该构造函数会在指定dom事件触发的时候，调用回调函数。callback方法有2个参数，一个是描述所有被触发改动的 MutationRecord 对象数组，另一个是调用该函数的MutationObserver 对象。第一个属性比较重要，返回了改变的信息。

然后调用observer.observe(targetNode, observerOptions);该方法配置了 MutationObserver 对象的回调方法以开始接收与给定选项匹配的DOM变化的通知。根据配置，观察者会观察 DOM 树中的单个 Node，也可能会观察被指定节点的部分或者所有的子孙节点。 observerOptions记录了选项设置。支持{attributeFilter, attributeOldValue, attributes, characterData, characterDataOldValue, childList ,subtree}。值得注意的是：当调用 observe() 方法时，childList，attributes 或者 characterData 三个属性之中，至少有一个必须为 true，否则会抛出 TypeError 异常。要停止 MutationObserver(以便不再触发它的回调方法)，需要调用MutationObserver.disconnect()方法。

举个详细点的例子。一个页面我需要在它其他元素没有超过客户端高度的时候，给底部容易加以fixed布局。因为这样的话body后面就不会有空白。而内部容器是有可能实时变化的(元素插入或者删除)。这样就需要这个方法去监听变化。

       const callback = function (mutations, ob) {            for (let mutation of mutations) {                if (mutation.type === 'childList') {                  resizeHandler(); //设置属性style                }            }        };        const targetNode = document.body;        const observerOptions = {            childList: true, // 观察目标子节点的变化，是否有添加或者删除            subtree: true // 观察后代节点，默认为 false        }        const observer = new MutationObserver(callback);        observer.observe(targetNode, observerOptions);

因为监听功能很强大，如果每次记录属性变化是非常复杂的，如果胡乱使用属性监听，浏览器会卡死。这里就一般记录节点。如果你的内容操作不是通过插入节点，而是修改属性的话，这个监听就会失效了。而这里的页面一般是自己制作的，不会有什么问题。

---

给你代码｜往期回顾：

扩展的上传与更新｜给你代码

随机密码生成器｜给你代码

你是否像我一样排斥Composer？｜给你代码