刪除 JavaScript 中的事件偵聽器

本教程教授如何在 JavaScript 中刪除事件偵聽器。

使用 removeEventListener() 方法刪除 JavaScript 中的事件監聽器

如果我們建立了一個元素並且我們不希望它在使用者與其互動時執行其預期的行為，我們必須從該元素中刪除事件偵聽器。我們通過使用 JavaScript 的內建函式 removeEventListener() 來實現這一點。此函式從元素中刪除附加的事件偵聽器並停止其預定義的操作。我們可以通過刪除附加到按鈕的事件偵聽器來禁用對按鈕的單擊。

該函式接受以下引數：

1. type：它是一個字串，指定我們要為其刪除事件偵聽器的使用者操作的型別。
2. listener：我們要從所述元素中刪除的事件偵聽器函式。
3. options：這是一個可選引數，有助於指定事件偵聽器的特徵。可以設定以下選項：
   • capture：它是一個布林變數，表示在移動到 DOM 樹中的任何目標事件之前，事件將轉到註冊的偵聽器。
   • mozSystemGroup：一個布林變數，指示事件監聽器將被新增到系統組中。它僅適用於在 XBL/Firefox 的 chrome 中執行的程式碼。
4. useCapture：它是一個布林變數，表示事件偵聽器是否為捕獲偵聽器。它也是一個可選引數。

var element_name = document.querySelector('#btn');
var count = 0;
var counter = function(event) {
    count++; 
    // perform the intended function in case of occurence of event 
    if(count == 2){
        this.removeEventListener('click', myHandler);
    } 
}
element_name.addEventListener('click', counter);

在上面的程式碼中，我們新增了一個事件監聽器，並指定了監聽器被觸發時要執行的函式。如果使用者再次嘗試觸發相同的偵聽器，我們將使用 removeEventListener() 刪除事件偵聽器。我們通過首先選擇要在其上新增/刪除事件偵聽器的元素來實現此目的。然後，我們初始化一個計數器來維護點選次數的計數。最後，我們宣告要觸發的事件處理程式並增加計數。如果使用者單擊兩次，則觸發 removeEventListener()。