变化观察者MutationObserver

当页面上元素变化时，比如点击、鼠标放上去，这时会触发事件，可以用addEventLister来监听，如

const targetElement = document.getElementById('btnApplyDelete');  
targetElement.addEventListener("mouseover",function(){ alert("abc") },false);

但是当元素属性变化时，addEventLister就无能为力了，这时要用到 MutationObserver

const targetElement = document.getElementById('btnApplyDelete');  

const config = { attributes: true, childList: true, subtree: true }; // 配置观察选项
const observer = new MutationObserver((mutationsList) => { // 创建观察器对象
    for (let mutation of mutationsList) {
        dg.datagrid('resize', {
            width: SetGridWidthSub(270),
            height: document.body.clientHeight - document.getElementById("mvctool").clientHeight - 10
        });
        $('#classTree1').css('height', document.body.clientHeight - document.getElementById("mvctool").clientHeight - 10);
    }
});

// 开始观察目标元素
observer.observe(targetElement, config);

比如元素从show和hide之间变化，上述功能可以捕获到变化并响应

在MDN中对于MutationObserver的介绍是：MutationObserver接口提供了监视对DOM树所做更改的能力

let targetNode = document.querySelector('#test');
let observerOptions = {
    childList: true, // 观察目标子节点的变化，添加或删除
    attributes: true, // 观察属性变动
    subtree: true //默认是false，设置为true后可观察后代节点
}
let observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);

参考：MutationObserver：监测DOM变化的强大工具

变化观察者MutationObserver

发表评论