JavaScript removeEventListener() Method Tutorial

In this section, we will learn what the removeEventListener() method is and how to use it in JavaScript.

What is Element removeEventListener() Method in JavaScript?

The JavaScript Element removeEventListener() method is used to remove an event listener for a specific event that is currently set on an element using `element.addEventListener()` method. After invoking the removeEventListener() method, the handler no-longer gets execute when that specific event occurs on the target element.

JavaScript removeEventListener() Method Syntax:

element.removeEventListener(event, function, useCapture);

JavaScript removeEventListener() Method Parameter

The method takes three arguments:

  • The first argument is the name of the event that we want to remove the handler that is already set for it.
  • The second argument is a reference to the function that was set as the handler of the event. (The method that we put as the second argument of the addEventListener() method).
  • The third argument, which is optional, is a boolean value indicating the phase to remove the handler from.

The value true means remove the handler from the capturing phase. And the value false (which is the default value) means to remove the handler at the bubbling phase.

Note: if the function handler that we set as the second argument of the addEventListener was anonymous or an arrow function, the removeEventListener() method won’t work on that handler anymore! This is because there’s no way for the removeEventListener() method to get a reference to that function.

JavaScript removeEventListener() Method Return Value

The method does not return a value.

Example: removeEventListener() in JavaScript

See the Pen removeEventListener() in JavaScript by Omid Dehghan (@odchan1) on CodePen.

Leave a Reply