JavaScript | removeEventListener() method with examples

21 Jul, 2021
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.
<!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>                              
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.
<!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>
Output:Before clicking the “click here” button-
After clicking the “click here” button-
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-functions
JavaScript
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request
How to Open URL in New Tab using JavaScript ?
How to get character array from string in JavaScript?
Node.js | fs.writeFileSync() Method
How do you run JavaScript script through the Terminal?
JavaScript | Promises