1、removeEventListener + debounce一起使用示例
mounted () {
this.eventresizeEchart = _.debounce(this.resizeEchart, 500)
window.addEventListener("resize", this.eventresizeEchart);
},
beforeDestroy () {
window.removeEventListener("resize", this.eventresizeEchart)
},
methods: {
resizeEchart () {
this.myChart?.resize?.()
}
}
此种写法无法移除事件
mounted () {
window.addEventListener("resize", _.debounce(this.resizeEchart, 500)
);
},
beforeDestroy () {
window.removeEventListener("resize",this.resizeEchart)
}
2、removeEventListener + addEventListener
参数
addEventListener
element.addEventListener(event, function, true/false);
第一个参数:指定要注册到元素上的事件 第二个参数:是事件触发后执行的回调函数 第三个参数:指定监听器的触发阶段,事件冒泡false(默认)或者事件捕获true
removeEventListener
removeEventListener() 方法用于移除由 addEventListener() 方法添加的事件
参数与addEventListener类似
注意:
如果要移除事件句柄,addEventListener() 的执行函数必须使用外部函数
匿名函数事件是无法移除的
3、on-event
使用on-event函数绑定的事件处理器无法通过removeEventListener移除。
可通过属性置空实现清除事件处理器,on-event=null所以不可同时绑定两个事件
不支持事件捕获,支持事件冒泡