Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

dom
communitycreator

What is the DOM removeEventListener() method?

Ayush Trivedi

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Overview

In this shot, we will learn how to use the removeEventListener() method to remove an event handler from the element.

Parameters

removeEventListener() method takes 2 parameters:

  1. The name of the event you want to remove.
  2. The event handler for the specified event.

Code

Let’s write code to remove an event and its handler.

Explanation

  • In line 9, the Remove Event button calls the remove() function.
  • In line 10, we have the ‘+++’ button with id btn1. We will add and remove the event in this element.
  • In line 12, we have the p tag with id demo1, which will display the count. The text will change when we call the counter() function.
  • In line 15, we initialize a count variable.
  • In line 17, we add the ‘click’ event to the button with id btn1, which will call the counter() function.
  • In line 19, the counter() function is called whenever the +++ button is clicked, and the text of the p element will change to new text.
  • In line 23, the remove() function removes the event from the button with id btn1. We pass the name of the event and its function to removeEventListener() to remove the event.

Output

When we click the +++ button, the counter works, but after we click the Remove Event button, the counter stops working, which means the event is removed from the +++ button.

RELATED TAGS

dom
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring