[JavaScript知识库]Javascript中关于监听DOM元素状态的方法使用

Javascript中关于监听DOM元素状态的方法使用

MutationObserver

MutationObserver是针对DOM元素的观察器，观察它体内增加/减少子（爷孙）节点，或者子节点的属性等，可通过这一特性在观察器中增加相关的有利于实现逻辑处理的回调方法。

// 选择需要观察变动的节点
const targetNode = document.getElementById('#wc-content-right');
// 观察器的配置（需要观察什么变动）
const config = { attributes: true, childList: true, subtree: true };

// 当观察到变动时执行的回调函数
const callback = function(mutationsList, observer) {
    // Use traditional 'for loops' for IE 11
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            ......
        }
        else if (mutation.type === 'attributes') {
            ......
        }
    }
};

// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);
// 以上述配置开始观察目标节点
observer.observe(targetNode, config);
// 之后，可停止观察
observer.disconnect();

IntersectionObserver

IntersectionObserver是针对Dom元素的观察器，观察它与根元素或视口的交叉状态。

// 选择需要观察变动的节点
const targetNode = document.getElementById('#wc-content-right');
function callback(changes){
	var container = change.target;
	/*
	   changes为IntersectionObserverEntry对象，其提供目标元素的信息
	   {
		  time: 3893.92,
		  rootBounds: ClientRect { //根元素的矩形区域的信息
		    bottom: 920,
		    height: 1024,
		    left: 0,
		    right: 1024,
		    top: 0,
		    width: 920
		  },
		  boundingClientRect: ClientRect {  //目标元素矩形区域信息
		     // ...
		  },
		  intersectionRect: ClientRect {  //目标元素与视口交叉区域
		    // ...
		  },
		  intersectionRatio: 0.54,  //目标元素可见比率
		  target: element  //目标元素
		}
	*/
	......
}
var io = new IntersectionObserver(callback, option);
io.observe(targetNode);
// 停止观察
io.unobserve(element);
// 关闭观察器
io.disconnect();

DOM变异事件

DOM变异事件用于监听某个DOM内部变化，插入元素/删除元素/属性改变/document插入元素等现象发生时触发这些事件。例如：

   box.addEventListener('DOMNodeInsertedIntoDocument',function(e){
       e = e || event;
       box.style.background = 'lightblue';
       console.log('DOMNodeInsertedIntoDocument',e)
   });
   //DOMNodeInsertedIntoDocument、DOMNodeRemovedFromDocument:当document插入或删除元素时触发
   //DOMNodeInserted、DOMNodeRemoved：在使用appendChild()或removeChild()从DOM中增加/删除节点时，会触发事件