removeEventListener与debounce一起使用

278 阅读1分钟

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所以不可同时绑定两个事件

不支持事件捕获,支持事件冒泡