為什麼 `removeEventListener()` 在我的 JavaScript 程式碼中不起作用？

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

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

程式碼

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

<code class="javascript">area.addEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);</code>

問題

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

<code class="javascript">area.removeEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);</code>

但是，事件偵聽器仍保持附加狀態，無法刪除。

解決方案

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

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

<code class="javascript">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);</code>

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

以上是為什麼 `removeEventListener()` 在我的 JavaScript 程式碼中不起作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！