几个监听dom的api你都知道吗？

最新推荐文章于 2024-07-09 23:33:54 发布

简单的chen

最新推荐文章于 2024-07-09 23:33:54 发布

阅读量381

点赞数 8

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Dawnchen1/article/details/136476907

版权

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);