addEventListener如何销毁

在DOM事件模型中，可以使用removeEventListener()方法来销毁已经注册的事件处理函数。该方法需要传入三个参数：事件类型、事件处理函数和是否使用捕获模式。

下面是一个示例，演示如何使用removeEventListener()方法来销毁已注册的事件处理函数：

// 创建一个按钮元素
var button = document.createElement("button");
button.innerHTML = "点击我";

// 定义一个事件处理函数
function handleClick() {
  console.log("按钮被点击了");
}

// 注册事件处理函数
button.addEventListener("click", handleClick);

// 销毁事件处理函数
button.removeEventListener("click", handleClick);

在上面的示例中，我们首先创建了一个按钮元素，并定义了一个名为handleClick的事件处理函数。然后，我们使用addEventListener()方法将handleClick函数注册为按钮的点击事件处理函数。最后，我们使用removeEventListener()方法将handleClick函数从按钮的点击事件中移除，从而销毁了该事件处理函数。

相关问题

vue 销毁 window.addeventlistener resize

在Vue中销毁window.addEventListener('resize')可以通过以下步骤实现：

1. 在Vue组件的销毁钩子函数中，即`beforeDestroy`或者`destroyed`函数中，注销监听器。

beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
}

2. 在Vue组件的created钩子函数中声明并绑定一个`resize`事件的处理函数。

created() {
  this.handleResize = this.resizeHandler.bind(this);
  window.addEventListener('resize', this.handleResize);
},
methods: {
  resizeHandler() {
    // 处理窗口大小改变的逻辑
  }
}

在这里，我们声明了一个叫做`handleResize`的事件处理函数，并使用`bind`方法将其绑定到Vue组件的实例上。这样做是为了确保在事件处理函数内部可以访问组件的实例属性和方法。

3. 最后，在组件销毁时，需要在`beforeDestroy`或者`destroyed`钩子函数内部移除`resize`事件的监听器，以避免内存泄漏。

通过这种方式，我们可以在Vue组件销毁时正确地销毁`window.addEventListener`所绑定的`resize`事件监听器。这样做的好处是，可以避免在组件销毁后仍然存在的监听器导致的性能问题和内存泄漏。

vue3 中 在那个周期销毁 window.addEventListener

在Vue3中，如果你需要在组件销毁时移除通过`window.addEventListener`添加的事件监听器，你应该在`beforeDestroy`或`onBeforeUnmount`生命周期钩子中进行移除。这两个生命周期钩子分别对应Vue2和Vue3，其中Vue3推荐使用`onBeforeUnmount`。这样做可以确保在组件被销毁之后，不会发生内存泄漏或错误地触发事件。

具体来说，你可以在组件的`beforeDestroy`钩子中调用`removeEventListener`来移除事件监听器，示例如下：

export default {
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      // 处理事件逻辑
    }
  }
}

在Vue3中，推荐使用`onBeforeUnmount`：

export default {
  onBeforeUnmount() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      // 处理事件逻辑
    }
  }
}

这样可以确保组件在被卸载前移除事件监听器，防止组件销毁后事件依然被触发。