1.ResizeObsever:监听dom尺寸变化的api
使用方式:
const resizeObserver=new ResizeObserver(entries=>{
for(const entry of entries){
const contentBoxSize= Array.isArray(entry.contentBoxSize)
?entry.contentBoxSize[0]
:entry.contentBoxSize
console.log(entry)
// todo
}
})
resizeObserver.observe(document.querySelector('body'))
MDN文档地址:ResizeObserver
2.MutationObserver:监听节点内部变化的API
function callback(mutationList, observer) {
mutationList.forEach((mutation) => {
switch (mutation.type) {
case "childList":
/* 从树上添加或移除一个或更多的子节点;参见 mutation.addedNodes 与
mutation.removedNodes */
break;
case "attributes":
/* mutation.target 中某节点的一个属性值被更改;该属性名称在 mutation.attributeName 中,
该属性之前的值为 mutation.oldValue */
break;
}
});
}
var targetNode = document.querySelector("#someElement");
var observerOptions = {
childList: true, // 观察目标子节点的变化,是否有添加或者删除
attributes: true, // 观察属性变动
subtree: true, // 观察后代节点,默认为 false
};
var observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);
MDN文档地址:MutationObserver
3.InterjectionObserver:监听目标元素与其祖先元素交叉
用法一样懒得写了