我正在添加一個需要事件屬性以及其他引數的事件偵聽器
document.body.addEventListener("click", (e) =>
listenForMembersOpen(e, buttonReplacement, openEditModal)
);
當我的組件卸載但正在運行時，我需要洗掉此事件偵聽器：
document.body.removeEventListener("click", (e) =>
listenForMembersOpen(e, buttonReplacement, openEditModal)
);
似乎沒有完成作業。我認為這是因為事件偵聽器中的函式宣告。關于如何洗掉顯示的事件串列器的任何建議？
export function addListenersForButtonReplacement(buttonReplacement, openEditModal) {
document.body.addEventListener("click", (e) =>
listenForMembersOpen(e, buttonReplacement, openEditModal)
);
document.body.addEventListener("keydown", (e) =>
listenForMembersOpen(e, buttonReplacement, openEditModal)
);
}
uj5u.com熱心網友回復：
如果您曾經嘗試過比較物件的相等性，您就會知道：
const a = { v: 1 };
const b = { v: 1 };
a !== b
a != b
a === a
b === b
這也適用于函式。
當你呼叫 時addEventListener，它不是toString()輸入函式，當事件監聽器被移除時，檢查是否相等。相反，它存盤“參考”，即您作為引數傳遞給的函式，并對其進行比較。
那么，您使用它的方式是將相同的變數傳遞給removeEventListeneras to addEventListener，如下所示：
// create a separate function to handle the event
const eventHandler = (e) => listenForMembersOpen(e, buttonReplacement, openEditModal);
document.body.addEventListener("click", eventHandler);
// later...
document.body.removeEventListener("click", eventHandler);
簡單地傳遞相同的函式體內容（意味著當你toString()它的值將是相同的）將不會被識別為相同的事件偵聽器。
在您的背景關系中，您需要匯出該函式以在其他地方使用，也許通過從匯出的函式回傳該值，如下所示：
export function addListenersForButtonReplacement(buttonReplacement, openEditModal) {
const eventHandler = (e) => listenForMembersOpen(e, buttonReplacement, openEditModal);
document.body.addEventListener("click", eventHandler);
document.body.addEventListener("keydown", eventHandler);
// "export" it by returning:
return eventHandler;
}
以后當你在別處使用它時...
import { addListenersForButtonReplacement } from "./somewhere";
// later...
const evFn = addListenersForButtonReplacement(/* ... */);
// later... (we have the same "reference" to the function)
document.body.removeEventListener("click", evFn);
document.body.removeEventListener("keydown", evFn);
uj5u.com熱心網友回復：
是的。您需要有一個函式，否則 javascript 將無法找到函式參考
function listener (e) {
listenForMembersOpen(e, buttonReplacement, openEditModal)
}
document.body.addEventListener("click", listener);
document.body.removeEventListener("click", listener);
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/526166.html