关于addEventListener和removeEventListener的一些用法

1,832 阅读1分钟

这里是用来做关闭和刷新页面的监听

1.window.addEventListener('beforeunload', this.test),其中this,test应为函数而不是执行函数(this,test())

2.不可使用匿名函数,箭头函数window.addEventListener('beforeunload', e =>this.test(e))此类写发均为不正确的写法;

  created() {
    window.addEventListener('beforeunload', this.test)
  },
  mounted() {},
  methods: {
    test(e) {
      debugger
      console.log('刷新或关闭', e)
    },
  },
  destroyed() {
    window.removeEventListener('beforeunload', this.test)
  },

一个最简单的例子,用来测试addEventListener和removeEventListener的执行

<button @click="test">添加</button>
<button @click="test2">删除</button>
 methods: {
    test() {
      window.addEventListener('beforeunload', this.test3())
      console.log('test')
    },
    test2() {
      window.removeEventListener('beforeunload', this.test3())
      console.log('test2')
    },
    test3() {
      console.log('test3')
    },
 }