HTML | DOM removeEventListener() Method

The removeEventListener() method is used to remove an event handler associated with the addEventListener() method. This method of removing event handler can be used only with the addEventListener() method specified using an external function.

Syntax:

element.removeEventListener(event, function, useCapture);

Parameters: This function accepts three parameters as described below:



  • event: The parameter event specifies the name of the event to be removed.
  • function: The parameter function specifies the function to be removed.
  • useCapture: The parameter useCapture denotes the event phase to be removed from the event handler. If useCapture has the boolean value true, it removes the event handler from the capturing phase else it removes the event handler from the bubbling phase.

Example: In the below example, calls event handler which changes the color of the division tag on mousemove over division. After pressing the change color button, the event handler associated with the division tag gets removed and no color change appears on mousemove over division.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <style>
        #myDIV {
            font-size:60px;
            border: 1px solid;
            padding: 50x;
            color: black;
        }
    </style>
</head>
  
<body>
    <div id="myDIV">
        GeeksForGeeks
    <br>
          
        <button onclick="removeHandler()" id="myBtn">
            Change color
        </button>
    </div>
      
    <script>
        document.getElementById("myDIV")
            .addEventListener("mousemove", myFunction);
          
        function myFunction() {
            document.getElementById("myDIV")
                        .style.color= "green";
        }
          
        function removeHandler() {
            document.getElementById("myDIV")
            .removeEventListener("mousemove", myFunction);
        }
    </script>
</body>
</html>                    

chevron_right


Ouput:
Before Pressing Button:

After Pressing Button:

Supported Browsers: The browsers supported by removeEventListener() method are listed below:

  • Google Chrome 1.0
  • Internet Explorer 9.0
  • Firefox 1.0
  • Opera 7.0
  • Safari 1.0


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 :
Practice Tags :


Be the First to upvote.


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