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

javascript 专栏收录该内容
7 篇文章 0 订阅

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中增加/删除节点时,会触发事件
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值