前端如何监听的dom元素的变化

使用场景

在前端开发中，会有这样的两种场景

• 承载3d场景或可视化的图表的canvas标签尺寸发生变化时，去做自适应重新渲染
• 当某个文本在标签内显示溢出样式控制出现省略号，鼠标浮动需要出现完整提示

出现这种情况时，可以通过去监听dom元素的变化，去做相应的控制，来实现这种类似的功能

具体实例

以下实例均使用Vue3去实现

MutationObserver¹

MutationObserver接口提供了监视对 DOM 树进行更改的能力。它被设计为旧的 Mutation Events 功能的替代产品，该功能是 DOM3 Events 规范的一部分。
下面是监听元素是否显示，从而控制按钮显隐的实例

<template>
	<div id="container">
		....
	</div>
	<button v-if="showBtn">按钮</button>
</template>

<script setup>
const showBtn = ref(false)
let observer = null
onMounted(()=>{
	const btn = document.getElementById('container')
	// 创建一个MutationObserver实例
	//mutationsList:变化节点属性的数组
	observer = new MutationObserver((mutationsList) => {
	    for (let mutation of mutationsList) {
	    	//type = attributes:中某节点的一个属性值被更改
	    	//type = childList：从树上添加或移除一个或更多的子节点
	        if (mutation.type = 'attributes' && mutation.attributeName == 'style') {
	            showBtn.value = btn.style.display = 'none'
	        }
	    }
	})
	
	// 开始监听属性变化
	observer.observe(btn, { 
		attributes: true // 是否监视正在监视的一个或多个节点上属性值的更改
	});
})
beforeDestory(()=>{
	//disconnect() 取消对所有dom的监听
	observer.disconnect()
	observer= null
})
<script>

ResizeObserve²

ResizeObserver 接口监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化。
下面是监听元素尺寸变化去重新渲染echart图表的实例

<template>
	<div ref="echartsCon" style="width:100%;height:100%"></div>
</template>
<script setup>
let resize0bserver = null
const echartsCon = ref(null)
onMounted(()=>{
	resize0bserver = new ResizeObserver(() => {
		// 元素尺寸发生变化时触发的事件
		// 用requestAnimationFrame则为让它在下一帧去执行重新渲染echart
	    requestAnimationFrame(() => {
	        if (echartsCon.value) {
	            this.chartChange();
	        }
	    });
	});
	// observe(target) target:需要观察的dom
	resize0bserver.observe(echartsCon.value);
})
// 组件被销毁前结束对dom的监听，销毁对象
beforeDestory(()=>{
	// unobserve(target) target:需要观察的dom
	// resize0bserver.unobserve(echartsCon.value)
	//disconnect() 取消对所有dom的监听
	resize0bserver.disconnect()
	resize0bserver = null
})
</script>

---

1. MotationObserve文档 ↩︎

2. ResizeObserve文档 ↩︎