Eloquent JavaScript中的removeEventListener示例

在下面的截圖中，有人能解釋爲什麼你必須將函數「once」傳遞給button.removeEventListener（「click」，一次）嗎？我們只是通過它，因爲removeEventListener方法需要兩個參數？此外，看起來很奇怪，如果「once」函數也傳遞給removeEventListener方法，則「完成」不是控制檯記錄多次。Eloquent JavaScript中的removeEventListener示例

let button = document.getElementById("button"); 
 

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

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

來源

2017-10-28 phao5814

「*我們只是通過它，因爲removeEventListener方法需要兩個參數嗎？*」 - 不。我們不是因爲函數有兩個參數而傳遞一些隨機值。我們正好傳遞事件監聽器函數*，因爲removeEventListener需要知道要刪除哪個監聽器，因爲您可以[參閱文檔]（https://developer.mozilla.org/en-US/docs/Web/API /事件目標/ removeEventListener）。 – Bergi

當你想解除綁定只有特定的處理器（如你在這裏解除綁定once處理器），你需要傳遞的第二個參數，否則JS不會知道刪除哪個處理程序。

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

此外，由於「once」函數也被傳遞給removeEventListener方法，所以看起來很奇怪「完成」不是控制檯記錄多次。

這就是爲什麼它只被調用一次的原因。您在那裏傳遞函數once的引用，所以JS知道要解除綁定的處理程序。當您致電removeEventListener時，它不稱呼它。

一旦用戶點擊按鈕，處理器中有這個console.log，這個函數被調用，並且在它將自己取消註冊之後，所以後面的點擊不會再觸發該函數。

來源

2017-10-28 09:49:09

感謝Martin的解釋 - 這很有幫助。 – phao5814

您可以將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

來源

2017-10-28 10:01:48

讓我在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 |

功能拉拉與一次相同，並將其從「點擊」事件中刪除。

來源

2017-10-28 10:03:07 RensvWalstijn

Eloquent JavaScript中的removeEventListener示例

回答

相關問題