JavaScript removeEventListener() method with examples

Last Updated : 08 Dec, 2023

Javascript removeEventListener() is an inbuilt function that is used to remove an event handler that was previously added using the addEventListener() function from the element.

Syntax:

element.removeEventListener(event, listener, useCapture)

Parameters:

It accepts three parameters which are specified below-

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

Example 1: In this example, we will create a hover effect on some text and then remove the event using the removeEventListener() function.

HTML

   <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Document</title>
</head>
 
<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>
 
  

Output:

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 events by finding the type of the triggered event.

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

HTML

   <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Document</title>
</head>
 
<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>
 
  

Output:

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.

JavaScript window.close() Method

vivekkothari

Improve

Article Tags :

JavaScript removeEventListener() method with examples

Syntax:

Parameters:

HTML

HTML

Similar Reads