問題與document.removeEventListener（）

Question

我有一個創建事件監聽器的函數：

document.addEventListener(name, handler.bind(null, name, callback), false);

我使用.bind傳遞額外的參數，但是當我嘗試刪除它時：

document.removeEventListener(name, handler, false);
// or
document.removeEventListener(name, handler.bind(null), false);

它實際上並沒有被刪除。 我已經嘗試了各種修復程序，但似乎無法正常工作。

Answer 1

您需要保存對綁定函數的引用，以便稍后可以使用removeEventListener對其進行調用：

const boundHandler = handler.bind(null, name, callback);
document.addEventListener(name, boundHandler, false);

// later:

document.removeEventListener(name, boundHandler, false);

Answer 2

EventTarget.removeEventListener()方法從EventTarget中刪除先前向EventTarget.addEventListener（）注冊的事件偵聽器。 使用事件類型，事件偵聽器函數本身以及可能影響匹配過程的各種可選選項的組合來標識要刪除的事件偵聽器 。

當您使用Function#bind ， bind()方法創建一個新函數 ，該函數在被調用時將其this關鍵字設置為提供的值，並在調用新函數時提供給定的參數序列。

因此，在使用removeEventListener ，您不會傳遞為addEventListener添加的函數的相同引用。

在變量中緩存了Handler function ，該變量可用於addEventListener和removeEventListener兩者

let handlerFunction = handler.bind(null, name, callback);
document.addEventListener(name, handlerFunction, false);
document.removeEventListener(name, handlerFunction, false);