如何通过Event对象引用移除JavaScript事件监听器？

直接给你结论：这种方式完全不可行，咱们来拆解下问题出在哪，以及正确的实现方式是什么：

1. 你存储的lastEvent并不是监听器本身 #

你代码里lastEvent = arguments[0]存的是某次点击触发时生成的Event实例——它只是用来描述这次点击的具体信息（比如点击位置、触发元素等），但它不是你添加的事件监听器函数，也没有移除监听器的能力。而且removeEventListener()是DOM元素的方法，不是Event对象的方法，你调用lastEvent.removeEventListener()本身就是错误的用法。

2. 移除事件监听器的核心要求 #

要成功移除一个事件监听器，必须同时满足三个条件：

• 操作的是同一个DOM元素（和添加监听器时的元素完全一致）
• 指定完全匹配的事件类型（比如都是click）
• 传入和添加时完全相同的函数引用（匿名函数根本做不到这一点，因为每次创建的匿名函数都是全新的引用）

正确的实现示例 #

如果想要通过button-2移除button-1的点击监听器，你需要把监听器抽成一个具名函数，而不是用匿名函数：

// 先定义一个具名的监听函数
function handleButton1Click(event) {
  // 要是需要存事件对象，这么做没问题
  window.lastEvent = event;
}

// 给button-1绑定监听器，用这个具名函数
document.getElementById("button-1").addEventListener("click", handleButton1Click);

// 给button-2绑定点击事件，用来移除button-1的监听器
document.getElementById("button-2").addEventListener("click", function() {
  // 移除时必须传对三个要素：元素、事件类型、同一个函数引用
  document.getElementById("button-1").removeEventListener("click", handleButton1Click);
});

再回头看你的原代码问题 #

你给button-1加的是匿名函数function(){ ... }，这种函数每次创建都是新的引用，你根本拿不到当时绑定的那个函数的引用，自然没法移除。而且你试图调用Event对象的removeEventListener，这完全找错了调用对象——这个方法必须由DOM元素来调用，还要传对参数才行。

内容的提问来源于stack exchange，提问作者Ood