How to remove event handlers in JavaScript?

An event is defined as a change in an object's state. There are a number of events in HTML that show when a user or browser performs a certain action. JavaScript responds to these events when JavaScript code is embedded in HTML and allows execution.

The process of responding to events is known as event handling. As a result, JavaScript uses event handlers to handle HTML events.

In this article, we are going to discuss how to remove event handlers in JavaScript. Here, we use the removeEventListener() method to remove an event handler from an element in JavaScript.

Using the removeEventListener() method

The JavaScript built-in function removeEventListener() removes an event handler from an element for a connected event. For instance, you can use removeEventListener() to get rid of a click event listener if a button is disabled after one click.

For ex, if you created an event and there is some interaction with that event from the user but you want to stop the event to react to the user after some particular case, in those type of situations you can use removeEventListenert() method.

Syntax

Following is the syntax for the removeEventListener() method.

element.removeEventListener(event, listener, useCapture)

Example 1

Removing button event

In this example, we used removeEventListener() function to remove the events which are assigned to the HTML elements. In this below scenario we have assigned an event listener to button element and also we disabled the event for preventing double click on button from user.

<html>
<body>
   <button id="punch">Punch it!</button>
   <script>
      let button = document.getElementById("punch");
      function func(event) {
         alert("Done, You've punched the button!");
         button.disabled = true; // disable button
         button.removeEventListener("click", func); // remove event listener
      }
      button.addEventListener("click", func);
   </script>
</body>
</html>

After clicking on the button, alert box will pop up.

After clicking on OK button, the event will be removed.

Example 2

Following is another example of removing a button event −

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Remove an event handler</title>
   <div id="add">
      <input type="button" onclick="removeHandler()" value="remove" />
   </div>
   <p id="random"></p>
</head>
<body>
   <script>
      let content = document.getElementById("add");
      content.addEventListener("mousemove", myFunction);
      function removeHandler() {
         content.removeEventListener("mousemove", myFunction);
      }
      function myFunction() {
         document.getElementById("random").innerHTML = Math.random();
      }
   </script>
</body>
</html>

Example 3

Removing mouseover event

In this example, We assigned a mouseover event to an element. User starts hovering on that element and want to stop the event. So that we implemented removeEventListener() on button element to eliminate the mouse hover event.

<!DOCTYPE html>
<html>
<body>
   <h1 id="hovereffect">Do hover on this text here.</h1>
   <h3>To remove the hovering effect, use this button!</h3>
   <button id="click_me" onclick="RemoveAfterClick()">Click me</button>
   <b id="effect"></b>
   <script>
      const a = document.getElementById("hovereffect");
      a.addEventListener("mouseover", MouseOverEffect);
      function MouseOverEffect() {
         document.getElementById("effect").innerHTML +=
            "mouseover Event happened because you hovered !!" + "<br>";
      }
      function RemoveAfterClick() {
         a.removeEventListener("mouseover", MouseOverEffect);
         document.getElementById("effect").innerHTML +=
            'You just hit the "click me" button' + "<br>" +
            "Now, the mouseover event is disabled. !!";
      }
   </script>
</body>
</html>

After hovering on the text "Do hover on this text here", it will start printing as shown in below whenever the mouse got hovered.

Now, click on "Click me" button to remove the mouseover event

Example 4

Removing onmousemove event

In this example, we created a div element and assigned onmouseevent on it. And passed Math.random() into that div element. So, whenever the mouse pointer moves in that particular div element, there will a number numbers coming out as a result. To stop user form doing this, we created a button and passed removeEventListenter to it. So that whenever we clicked on that button it stops showing the random numbers.

<!DOCTYPE html>
<html>
<style>
   #Box {
       background-color: #808000;
       padding: 10px;
    }
</style>
<body>
   <h3>Removing onMouseEvent</h3>
   <div id="Box"> When you move the mouse withinthis Green box, an onmousemove event handler shows a random number.
      <p>To stop this onmousemove event, Just click the button below </p>
   </div>
   <br>
   <button onclick="removeEvent()">Stop event!</button>
   <p id="para"></p>
   <script>
      const Box = document.getElementById("Box");
      Box.addEventListener("mousemove", func);
      function removeEvent() {
         Box.removeEventListener("mousemove", func); // Will stop the event
      }
      function func() {
         document.getElementById("para").innerHTML = Math.random(); //Math.random() will give random numbers
      }
   </script>
</body>
</html>

After clicking on "Stop event", the math.random() function will stop.

Updated on: 25-Oct-2023

23K+ Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements