返回課程

哪些處理常式會執行?

重要性:5

變數中有一個按鈕。上面沒有處理常式。

在以下程式碼之後,哪個處理常式會在點擊時執行?哪些警示會顯示?

button.addEventListener("click", () => alert("1"));

button.removeEventListener("click", () => alert("1"));

button.onclick = () => alert(2);

答案:12

第一個處理常式會觸發,因為它沒有被 removeEventListener 移除。要移除處理常式,我們需要傳遞與指派函數完全相同的函數。而在程式碼中傳遞了一個新的函數,看起來相同,但仍然是另一個函數。

若要移除函式物件,我們需要儲存其參考,如下所示

function handler() {
  alert(1);
}

button.addEventListener("click", handler);
button.removeEventListener("click", handler);

處理常式 button.onclick 獨立運作,且與 addEventListener 互補。