如何刪除 JavaScript 中動態生成的事件處理程序

Question

當我單擊按鈕時，我看到控制台消息顯示我已單擊它們。 當我取消選中復選框然后單擊按鈕時，我預計不會出現控制台消息，但我仍然會看到它們。 為什么removeEventListener不移除事件監聽器？

 const buttons = document.querySelectorAll('ul li button'); function initialize() { for (let i = 0; i < buttons.length; i++) { function doSomething() { console.log(`You clicked on ${buttons[i].textContent}`); } if (document.querySelector('#mode').checked) { buttons[i].addEventListener('click', doSomething); } else { buttons[i].removeEventListener('click', doSomething); } } } document.querySelector('#mode').addEventListener('click', initialize); initialize();

 <input id='mode' type='checkbox' checked/> <label for='mode'>Do something when you click</label> <ul> <li><button>One</button> <li><button>Two</button> <li><button>Three</button> <li><button>Four</button>

我無法在 for 循環之外定義doSomething ，因為i需要做其他事情（為簡單起見，此處未顯示）。 我確實需要為每個索引使用不同的處理程序。

Answer 1

目前， doSomething是在 for 循環中定義的，這意味着每次執行initialize時，您都會得到一個名為doSomething的新 function。 因此addEventListener添加一個 function 稱為doSomething ，並且removeEventListener嘗試刪除另一個 function （也稱為doSomething ）。 新的doSomething從未注冊為事件偵聽器，因此無法刪除，而舊的doSomething不在 scope 中，因此我們無法引用它來刪除它。 相反，您可以動態生成函數一次並在initialize中引用它們。

 const buttons = document.querySelectorAll('ul li button'); const buttonFunctions = []; for (let i = 0; i < buttons.length; i++) { buttonFunctions[i] = function doSomething() { console.log(`You clicked on ${buttons[i].textContent}`); } } function initialize() { for (let i = 0; i < buttons.length; i++) { if (document.querySelector('#mode').checked) { buttons[i].addEventListener('click', buttonFunctions[i]); } else { buttons[i].removeEventListener('click', buttonFunctions[i]); } } } document.querySelector('#mode').addEventListener('click', initialize); initialize();

 <input id='mode' type='checkbox' checked/> <label for='mode'>Do something when you click</label> <ul> <li><button>One</button> <li><button>Two</button> <li><button>Three</button> <li><button>Four</button>