监听窗口resize事件
监听浏览器窗口resize事件很简单,如下一行代码即可搞定:
window.addEventListener('resize', () => {})
如何监听dom的resize事件呢?
监听dom的resize事件
const myObserver = new ResizeObserve(entries => {
console.log("dom元素resize")
})
myObserver.observe(target)//target:要监听的dom元素
需要注意的一点,在进入和离开当前页面时,dom监听事件都会触发一次。
如果在事件监听函数里面有涉及到对该dom的操作(比如说初始化echart),那么当前页面销毁后,该dom已经不存在了,而监听事件还要执行一次,就会报错(无效的dom):
解决方法:如果是在vue中使用,组件销毁之前停止监听即可:
beforeDestroy() {
this.myObserver.unobserve(target)
}
完整代码示例
下面给个示例,监听echarts所绑定dom的resize事件,并做防抖处理。
<template>
<div ref="echart" class="echart"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
data() {
return {
myObserver: '',//resize监听器
timer: '',//定时器
myEchart: '',//echart实例
}
},
mounted() {
//this.loadEchart()
//不需要执行上一行的原因是,下面的监听器会在挂载的时候自动执行一次。
this.myObserver = new ResizeObserver(entries => {
if(this.timer) {
clearTimeout(this.timer)
}
this.timer = setTimeout(this.loadEchart(), 50)
})
this.myObserver.observe(this.$refs.echart)
},
beforeDestory() {
clearTimeout(this.timer)
/*
清除定时器。定时任务不会随着组件销毁而销毁,所以组件销毁后,
如果还有定时任务没有执行,就会继续调用loadEchart函数,
而此时this.$refs.echart是undefined,echart就会报错:
“Initialize failed: invalid dom”,意思就是“初始化失败:无效的dom”
*/
this.myObserver.unobserve(this.$refs.echart)
},
methods: {
//加载echart
loadEchart() {
if(this.myEchart) {//如果echart已经初始化过,需要销毁,否则会报错:重复初始化
this.myEchart.dispose()
}
this.myEchart = echarts.init(this.$refs.echart)
let option = {
xAxis: {
data: ['1月', '2月', '3月']
},
yAxis: {
type: 'value'
},
series: [
{
name: '销量',
type: 'bar',
data: [100, 200, 300]
}
]
}
this.myEchart.setOption(option)
}
}
}
</script>
<style scoped>
.echart {
width: 100%;
height: 500px;
}
</style>