雄辯的JavaScript中的removeEventListener示例

Question

在下面的屏幕截圖中，有人可以解釋為什么您必須將函數“一次”傳遞給button.removeEventListener（“ click”，一次）嗎？ 我們是否僅通過removeEventListener方法需要兩個參數來傳遞它？ 另外，給定“一次”功能也傳遞到removeEventListener方法中，“完成”沒有多次被控制台記錄似乎很奇怪。

 let button = document.getElementById("button"); function once() { console.log("Done"); button.removeEventListener("click", once); } button.addEventListener("click", once); 

 <button id="button">once</button> 

Answer 1

當您只想取消綁定特定的處理程序時（例如此處要取消綁定once處理程序），則需要將其作為第二個參數傳遞，否則JS將不知道要刪除哪個處理程序。

每個事件可以綁定多個處理程序。

另外，給定“一次”功能也傳遞到removeEventListener方法中，“完成”沒有多次被控制台記錄似乎很奇怪。

這就是為什么只調用一次的原因。 您傳遞的函數的引用once在那里，所以JS知道要解除綁定該處理程序。 當您調用removeEventListener時，它不會調用它。

一旦用戶單擊該按鈕，該函數便被調用，在處理程序中有該console.log ，並且此后它將立即注銷自身，因此以后的單擊將不再觸發該函數。

Answer 2

您可以將javascript中的多個事件綁定到同一操作上的一個元素。

當您想從綁定事件中刪除特定處理程序時，需要在removeEventListener傳遞該處理程序函數名稱。 如果您沒有在removeEventListener傳遞第二個參數，它將僅刪除該事件上該動作的所有處理程序。

在您的情況下，您要從自身內部刪除處理程序once 。

一個帶有不同處理程序的示例來說明：

 function firstListener(e) { console.log('firstListener'); } function secondListener(e) { console.log('secondListener'); // this will remove `firstListener` handler from subsequent button clicks e.target.removeEventListener('click', firstListener); } // bind first event handler function document.querySelector('#btnMultiEvent').addEventListener('click', firstListener); // bind second event handler function document.querySelector('#btnMultiEvent').addEventListener('click', secondListener); 

 <button id="btnMultiEvent">Multiple Event Button</button> 

有關removeEventListener的更多信息

Answer 3

讓我在ascii代碼表中進行解釋：

               | script start | nothing happens | once() execute | nothing happens |
---------------|--------------|-----------------|----------------|-----------------|
"click" Events | once() added | once() waiting  | once() removed |                 |
               | lala() added | lala() waiting  | lala() waiting | lala() waiting  |

函數lala與一次函數相同，並將其自身從“ click”事件中刪除。