前言：
现在咱们对“js监听dom”大约比较珍视，兄弟们都需要学习一些“js监听dom”的相关文章。那么小编也在网络上搜集了一些对于“js监听dom””的相关资讯，希望大家能喜欢，大家快快来了解一下吧！#从今天起记录我的2023#
当我们切换左侧菜单展示效果的时候，有时一些需要进行缩放计算的右侧内容并不能执行自适应效果，所以为解决类似此问题，我们可以使用以下几种方式进行监听宽高变化，在进行相应的逻辑计算。
1.使用element-resize-detector方式监听宽度变化
安装：
npm install element-resize-detector --save
使用：
//引入element-resize-detectorimport elementResize from "element-resize-detector";//在mounted中使用 mounted() { //1、使用element-resize-detector方式监听宽度变化 var erd=elementResize(); let that=this; //监听并执行 erd.listenTo(document.getElementById('mainSize'),function(element){ var width=element.offsetWidth; var height=element.offsetHeight; that.$nextTick(function () { console.log(999999999999); }) })}
2.Mutation Events中的DOMSubtreeModified
DOMSubtreeModified用于监听元素子项修改(包括删除和新增）；
document.getElementById('mainSize').addEventListener('DOMSubtreeModified', this.setWidth);Mutation Events中的问题：
IE9不支持Mutation Events；性能问题：Mutation Events是同步执行的：它的每次调用，都需要从事件队列中取出事件并执行，然后事件队列中移除，期间需要移动队列元素；如果事件触发的较为频繁的话，每一次都需要执行上面的这些步骤，那么浏览器会被拖慢；Mutation Events本身是事件，所以捕获是采用的是事件冒泡的形式；如果冒泡捕获期间又触发了其他的Mutation Events的话，很有可能就会导致阻塞Javascript线程，甚至导致浏览器崩溃；
3.使用Mutation Observer
MutationObserver接口提供了监视对DOM树所做的更改的功能。Mutation Observer是在DOM4中定义的，用于替代Mutation Events的新API ;
//必须更改style样式才会被监听到 var MutationObserver=window.MutationObserver||window.WebKitMutaionObserver||window.MozMutationObserver var suppored=!!MutationObserver; var article=document.getElementById('mainSize'); var mo =new MutationObserver( (list)=> { console.log('00000'); for (const iterator of list) { console.log(iterator); } console.log('00000'); }) var options={ attributes:true, attributeFilter:['style'], attributeOldValue:true, } mo.observe(article,options);浏览器兼容：
4.使用ResizeObserver
我们知道window.resize事件能帮我们监听窗口大小的变化。它会监听每个元素的大小变化（只有window对象才有resize事件），而不是具体到某个元素的变化。ResizeObserver接口监视Element内容盒或边框盒或者SVGElement边界尺寸的变化。（节点大小、出现或隐藏）
const myObserver=new ResizeObserver(entries=>{ entries.forEach(entry => { console.log(entry.contentRect); console.log(entry.target); }); }) myObserver.observe(document.getElementById("mainSize"))但是作为一个较新的JavaScript API，他的兼容性需要注意：
5.自定义指令监听某标签宽高变化
directives:{
//5、自定义指令监听某标签宽高变化
resize:{
bind(el,binding){
let width='',height=''
function isResize(){
//获取当前元素的所有的计算样式
const style=document.defaultView.getComputedStyle(el);
if(width!==style.width||height!==style.height){
binding.value()
}
width=style.width
height=style.height
}
el._vueSetInterval=setInterval(isResize,300);
},
unbind(el){
clearInterval(el._vueSetInterval)
}
}
},
@大有學問
