js中addEventListener如何取消

Posted 2023-04-24

在js程序设置了某个addEventListener，但是特定情况下需要取消这个事件监听，该怎么做?

添加监听事件
　　function Go()
　　
　　//...
　　
　　document.getElementById("testButton").addEventListener("click", Go, false);
　　或者 listener 直接就是函数
　　document.getElementById("testButton").addEventListener("click", function () ... , false);
　　删除监听事件
　　document.getElementById("testButton").addEventListener("click", Go); 参考技术A 取消这个事件监听可以用removeEventListener,removeEventListener 用法和 addEventListener 完全相同本回答被提问者采纳

如何在 Vue JS 中添加 window.addEventListener 和删除 window.removeEventListener

【中文标题】如何在 Vue JS 中添加 window.addEventListener 和删除 window.removeEventListener

【英文标题】：How to add window.addEventListener and remove window.removeEventListener in Vue JS

【发布时间】：2021-05-28 17:54:00

【问题描述】：

我想在 vue js 文件中添加 window.addEventListener。

 window.addEventListener('message', (event) => 
  console.log(event, ' i am here');
 );
     
     

我已经在mounted()函数中添加了这个。

现在，我需要在销毁的方法中删除它，但不知何故我无法做到。

window.removeEventListener('message', (event) => 
  console.log(event, ' i am here');
);

【问题讨论】：

这能回答你的问题吗？ Add Vue.js event on window

【参考方案1】：

好的，所以我创建了一个小提琴，它将向您展示如何删除和添加消息处理程序以及如何在此处发布消息：

new Vue(
  el: "#app",
  methods: 
    addHandler: function() 
        window.addEventListener('message', this.eventListenerExample);
    ,
    removeHandler: function()
        window.removeEventListener('message', this.eventListenerExample);
    ,
    postMessage: function() 
        window.postMessage("This is a message ");
        ,
    eventListenerExample: function(event)
        console.log(event, ' i am here');
    
  ,
  mounted: function () 
    this.addHandler();
    ,
  destroyed: function() 
    this.remveHanlder();
  
)

https://jsfiddle.net/ob1pLd7z/8/

这里请注意，该函数是此 vue 实例的一部分，并且该函数本身被添加和删除，而不是像您最初显示的那样使用内联函数。

【参考方案2】：

我很高兴得知您想在组件销毁后清除/删除侦听器

  mounted() 
    const listener = () => 
    const event = 'message'
    window.addEventListener(event, listener)
    this.$once('hook:destroyed', () => 
      window.removeListener(event, listener)
    )