Why Doesn\'t `removeEventListener()` Work in My JavaScript Code?

EventListener Removal Issue in JavaScript: Why removeEventListener() Fails

In JavaScript, event listeners enable developers to monitor DOM element events such as clicks, mouse movements, and much more. While attaching an event listener is fairly straightforward, removing it can sometimes pose challenges.

The Code

The original code adds an event listener to an element named area when clicked.

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

The Problem

The problem arises when attempting to remove the event listener later in the code.

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

However, the event listener remains attached, preventing its removal.

The Solution

The reason for this issue lies in how event listeners are attached. Each different function instance creates a separate event listener. In this case, two anonymous functions are used for adding and removing the listener.

To resolve the issue, ensure that the function reference used for removal is identical to the one used for adding the listener.

<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>

By using the same function reference for both operations, JavaScript can correctly remove the event listener when called.

The above is the detailed content of Why Doesn\'t `removeEventListener()` Work in My JavaScript Code?. For more information, please follow other related articles on the PHP Chinese website!