HTML DOM removeEventListener() Method

Last Updated : 13 Jun, 2023

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.

html

<!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>