EventTarget: removeEventListener() 方法
注意：此功能在 Web Workers 中可用。
EventTarget 接口的 removeEventListener() 方法会从目标中移除之前通过 EventTarget.addEventListener() 注册的事件监听器。要移除的事件监听器是通过事件类型、事件监听器函数本身以及可能影响匹配过程的各种可选选项的组合来识别的；请参阅 匹配要移除的事件监听器。
使用不匹配当前在 EventTarget 上注册的任何 事件监听器 的参数调用 removeEventListener() 没有效果。
如果在处理事件的另一个监听器正在处理事件时，从 EventTarget 中移除了 事件监听器，那么该事件将不会触发它。但是，它可以被重新附加。
警告： 如果一个监听器被注册了两次，一次设置了捕获标志，一次没有，您必须分别移除它们。移除一个捕获监听器不会影响同一监听器的非捕获版本，反之亦然。
事件监听器也可以通过将 AbortSignal 传递给 addEventListener()，然后在稍后调用拥有该信号的控制器的 abort() 来移除。
语法
removeEventListener(type, listener)
removeEventListener(type, listener, options)
removeEventListener(type, listener, useCapture)
参数
type-
一个字符串，指定要移除事件监听器的事件类型。
监听器-
要从事件目标中移除的事件处理器的 事件监听器 函数。
options可选-
一个选项对象，用于指定事件监听器的特性。
可用的选项有：
capture：一个布尔值，指定要移除的 事件监听器 是注册为捕获监听器还是非捕获监听器。如果省略此参数，则默认为false。
useCapture可选-
一个布尔值，指定要移除的 事件监听器 是注册为捕获监听器还是非捕获监听器。如果省略此参数，则默认为
false。
返回值
无。
匹配要移除的事件监听器
给定一个通过调用 addEventListener() 添加的事件监听器，您可能最终需要移除它。显然，您需要向 removeEventListener() 指定相同的 type 和 listener 参数。但是 options 或 useCapture 参数呢？
虽然 addEventListener() 允许您为同一类型添加同一个监听器多次（如果选项不同），但 removeEventListener() 检查的唯一选项是 capture/useCapture 标志。它的值必须匹配才能让 removeEventListener() 匹配，但其他值则不必。
例如，考虑这个 addEventListener() 的调用：
element.addEventListener("mousedown", handleMouseDown, true);
现在考虑以下两个 removeEventListener() 调用：
element.removeEventListener("mousedown", handleMouseDown, false); // Fails
element.removeEventListener("mousedown", handleMouseDown, true); // Succeeds
第一个调用失败，因为 useCapture 的值不匹配。第二个调用成功，因为 useCapture 匹配。
现在考虑这个：
element.addEventListener("mousedown", handleMouseDown, { passive: true });
在这里，我们指定了一个 options 对象，其中 passive 设置为 true，而其他选项则保留为默认值 false。
现在依次查看这些 removeEventListener() 调用。任何将 capture 或 useCapture 设置为 true 的调用都会失败；所有其他调用都会成功。
只有 capture 设置对 removeEventListener() 有效。
element.removeEventListener("mousedown", handleMouseDown, { passive: true }); // Succeeds
element.removeEventListener("mousedown", handleMouseDown, { capture: false }); // Succeeds
element.removeEventListener("mousedown", handleMouseDown, { capture: true }); // Fails
element.removeEventListener("mousedown", handleMouseDown, { passive: false }); // Succeeds
element.removeEventListener("mousedown", handleMouseDown, false); // Succeeds
element.removeEventListener("mousedown", handleMouseDown, true); // Fails
值得注意的是，某些浏览器版本在此方面可能不一致，除非您有特殊原因，否则在调用 removeEventListener() 时使用与调用 addEventListener() 相同的值可能比较明智。
示例
此示例显示了如何添加一个基于 mouseover 的事件监听器，该监听器会移除一个基于 click 的事件监听器。
const body = document.querySelector("body");
const clickTarget = document.getElementById("click-target");
const mouseOverTarget = document.getElementById("mouse-over-target");
let toggle = false;
function makeBackgroundYellow() {
body.style.backgroundColor = toggle ? "white" : "yellow";
toggle = !toggle;
}
clickTarget.addEventListener("click", makeBackgroundYellow);
mouseOverTarget.addEventListener("mouseover", () => {
clickTarget.removeEventListener("click", makeBackgroundYellow);
});
规范
| 规范 |
|---|
| DOM # ref-for-dom-eventtarget-removeeventlistener② |
浏览器兼容性
加载中…