JavaScript | removeEventListener() method with examples

If an event is created and there is some activity from the user but you don’t want the element to react to that particular event for some purpose, so to do that we have removeEventListener() method in JavaScript.The removeEventListener() is an inbuilt function in JavaScript which removes an event handler from an element for a attached event.for example, if a button is disabled after one click you can use removeEventListener() to remove a click event listener.
Syntax:

element.removeEventListener(event, listener, useCapture)

Parameters: It accepts three parameters which are specified below-

  • event: It is a string which describes the name of event that has to be remove.
  • listener: It is the function of the event handler to remove.
  • useCapture: It is an optional parameter. By default it is Boolean value false which specifies the removal of event handler from the bubbling phase and if it is true than the removeEventListener() method removes the event handler from the capturing phase.

JavaScript Code to show the working of removeEventListener() method:

Code #1:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <h3>Click this button to stop hovering effect !!</h3>
    <button id="clickIt" onclick="RespondClick()">Click here</button>
  
    <h1 id="hoverPara">Hover over this Text !</h1>
  
    <b id="effect"></b>
  
    <script>
        const y = document.getElementById("hoverPara");
  
        y.addEventListener("mouseover", RespondMouseOver);
  
        function RespondMouseOver() {
            document.getElementById("effect").innerHTML +=
                "mouseover Event !!" + "<br>";
        }
  
        function RespondClick() {
            y.removeEventListener("mouseover", RespondMouseOver);
            document.getElementById("effect").innerHTML +=
                'You clicked the "click here" button' + "<br>"
                "Now mouseover event doesn't work !!";
        }
    </script>
</body>
  
</html>                              

chevron_right


Output:
Before hovering over the text-

After hovering 2 times over the text-

After clicking “click here” button-

Note: If the triggered event needs to be found out, the type event property can be used. This property can be used to remove specific event by finding the type of the triggered event.

code #2: The event.type property can be used to display the type of the triggered event. Below JavaScript code shows the working of event.type property and removeEventListener() method.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <button id="clickIt">Click here</button>
    <br>
  
    <b id="effect"></b>
  
    <script>
        const x = document.getElementById("clickIt");
  
        x.addEventListener("click", Respond);
  
        function Respond(e) {
            document.getElementById("effect").innerHTML +=
            "Type of event triggered = " + e.type + "<br><br>";
            document.getElementById("effect").innerHTML += 
            "Now click Event is disabled !! " + "<br><br>";
            x.innerText = "Click is disable !";
  
            // The click event is only one time triggered
            // by clicking the "click here" button.
            x.removeEventListener("click", Respond);
        }
    </script>
</body>
  
</html>

chevron_right


Output:
Before clicking the “click here” button-

After clicking the “click here” button-



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.