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② |
瀏覽器相容性
載入中…