removeEventListener()

How does the removeEventListener() method work?

In the previous lecture video, you learned how to work with "click" and "input" events by using the addEventListener() method. In this lecture video, you will learn how to remove event listeners using the removeEventListener() method.

The removeEventListener() method is used to remove an event listener that was previously added to an element using the addEventListener() method. This is useful when you want to stop listening for a particular event on an element.

Here is the basic syntax for the removeEventListener() method:

element.removeEventListener("event", listener);

Just like the addEventListener() method, the removeEventListener() method takes two arguments: the event you want to remove and the listener function that was previously added.

There is also an additional optional third argument that can be passed to the removeEventListener() method. This argument can either be the options or useCapture.

The options argument is an object that specifies the options for the event listener, such as whether the event listener should be passive or once.

The useCapture argument is a boolean value that specifies whether the event should be captured during the event propagation phase.

Most of the time, you will only need to pass the event and listener arguments to the removeEventListener() method.

Let’s take a look at an example to better understand how the removeEventListener() method works:

In this example, we have heading, paragraph and button elements in the HTML:

<h1>Event Listener examples</h1>
<p id="para">MouseOver this text to remove the event listener</p>
<button id="btn">Change background color</button>

Inside the CSS file, we are setting the body background color to grey:

body {
  background-color: grey;
}

If we want to toggle the background color between grey and blue, then we can use an event listener for that.

We first need to access the paragraph and button elements along with the body element:

const bodyEl = document.querySelector("body");
const para = document.getElementById("para");
const btn = document.getElementById("btn");

Then we need to create the function responsible for toggling between the grey and blue colors:

let isBgColorGrey = true;
 
function toggleBgColor() {
  bodyEl.style.backgroundColor = isBgColorGrey ? "blue" : "grey";
  isBgColorGrey = !isBgColorGrey;
}

We are using a boolean variable isBgColorGrey to keep track of the current background color. If the background color is grey, then we change it to blue, and vice versa.

Then we need to add an event listener to the button element to call the toggleBgColor function when the button is clicked:

btn.addEventListener("click", toggleBgColor);

Each time the button is clicked, the background color of the body will change between grey and blue.

To remove the event listener when the paragraph is hovered over, we can add an event listener to the paragraph element. We are using the mouseover event and passing in a function that removes the event listener from the button element:

para.addEventListener("mouseover", () => {
  btn.removeEventListener("click", toggleBgColor);
});

When the paragraph is hovered over, the event listener for the button click event is removed, and the background color will no longer change when the button is clicked.

Real world examples of when to use the removeEventListener() method include removing event listeners when a modal is closed in a web application or when a user logs out of an application.