JavaScript中的EventListener刪除問題：為什麼removeEventListener()失敗

在JavaScript中，事件監聽器使開發人員能夠監視DOM元素事件，例如單擊、滑鼠移動等更多的。雖然附加事件偵聽器相當簡單，但刪除它有時會帶來挑戰。

代碼

原始程式碼在點擊時將事件偵聽器新增至名為區域的元素。

area.addEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);

問題

嘗試在程式碼中稍後刪除事件偵聽器時出現問題。

area.removeEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);

但是，事件偵聽器仍處於附加狀態，無法將其刪除。

解決方案

此問題的原因在於事件偵聽器的附加方式。每個不同的函數實例都會建立一個單獨的事件偵聽器。在這種情況下，使用兩個匿名函數來新增和刪除偵聽器。

要解決此問題，請確保用於刪除的函數參考與用於新增偵聽器的函數引用相同。

function handleClickListener(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}

// Add event listener
area.addEventListener('click', handleClickListener, true);

// Remove event listener
area.removeEventListener('click', handleClickListener, true);

透過對兩個操作使用相同的函數引用，JavaScript 可以在呼叫時正確刪除事件偵聽器。