监听某个具体 dom 元素的变化
在实际业务中我们经常会监听窗口大小变化，来触发自定义事件，因为绝大多数情况下当浏览器窗口变化了，则等同于页面元素发送了变化，因此我们长写的代码如下
let timer1 = null;
window.addEventListener('resize', () => {
timer1 && clearTimeout(timer1);
timer1 = setTimeout(() => {
console.log('窗口变化了，请重新初始化echarts图表')
}, 100)
})
但是这样并不能完全覆盖某个 div 元素尺寸发生变化的情况，比如左侧菜单点击的展开、收起，仍会导致右侧部分 div 元素的宽度发生变化，当然我们可以在点击左侧菜单的时候同步触发一个自定义事件如下：
之所以加定时器，解释为js 手动触发 resize 事件不生效解决办法(一)
setTimeout(() => {
const event = document.createEvent('HTMLEvents')
event.initEvent('resize', true, true)
event.eventType = 'message'
window.dispatchEvent(event)
}, 350)
监听某个 dom 元素尺寸变化
很庆幸现在浏览器支持了这一个 api,当然并非是专门为了监听 dom 元素尺寸发生变化的 api,而是该 api 可以做到监听 dom 元素变化
ResizeObserver
<body>
<textarea id="textEl"></textarea>
<script>
let textEl = document.querySelector("#textEl");
let lastObj = {
width: 0,
height: 0,
};
const resizeObserver = new ResizeObserver((entries) => {
let { width, height } = entries[0]?.contentRect;
console.log();
if (lastObj.width === width && lastObj.height === height) {
return;
}
lastObj.width = width;
lastObj.height = height;
console.log("这里做你想要做的事情");
// 这里做你想要做的事情
});
resizeObserver.observe(textEl);
</script>
</body>
取消监听
const ro =new ResizeObserver(callback);
// 停止监听给定的元素
ro.unobserve(targetElement);
// 停止监听所有元素
ro.disconnect();
