HTML - DOM removeEventListener() Method

Quiz

The HTML DOM removeEventListener() method is used to remove an EventListener that was previously added to an element.

In JavaScript, an EventListener is a procedure or a function that is executed when a specified event occurs, such as "click", "mouseover", or "mouseout".

Syntax

Following is the syntax of the HTML DOM removeEventListener() method −

element.removeEventListener(event, function, capture);

Parameters

This method accepts three parameters as mentioned below −

Parameter	Description
event	the type of the event you want to remove.
function	function that handles the event.
capture	It is optional decides the removal of an EventListener: It sets 'true' for capturing phase and 'false' for bubbling phase(default).

Return Value

This method does not return any value.

Example 1: Remove Event Listener From Button

The following is a basic example of the HTML DOM removeEventListener() method. It demonstrates how to remove an event listener from an element when the button is clicked −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM removeEventListener()</title>
<style>
   button{
      padding: 8px;
   }
</style>
</head>
<body>
<p>Click Remove Listener to remove event handler.</h2>
<br><br>
<button class="myButton">Button 1</button> 
<button id="removeButton">Remove Listeners</button>
<div id="output"></div>
<script>
   const buttons = document.querySelectorAll('.myButton');
   const output = document.getElementById('output');
   const clickHandler = () => {
       output.textContent = 'Button clicked!';
   };
   buttons.forEach(button => button.addEventListener
   ('click', clickHandler));
   document.getElementById('removeButton').addEventListener('click', () =>{
       buttons.forEach(button =>button.removeEventListener
       ('click', clickHandler));
       output.textContent='Event listeners removed!';
   });
</script>
</body>
</html>

Example 2: Sets and Remove the Styles From a Div Element

Following is another example of the HTML DOM removeEventListener() method. This code contains two buttons. One button is used to add an event listener to an <div> element, and the other button is used to remove an event listener from that element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM removeEventListener()</title>
<style>
   .highlighted {
       background-color: yellow;
       padding: 10px;
       border: 1px solid orange;
       margin-top: 10px;
   }
   button{
       padding: 8px;
 }
</style>
</head>
<body>
<h1>HTML - DOM Element</h1>
<h2>removeEventListener() Method</h2>
<p>This example set and remove the styles by using the event handler..</p>
<button id="hb">Highlight</button>
<button id="rb">Remove Style</button>
<div id="content">This is a div element.</div>
<script>
   const ele = document.getElementById('content');
   const hib = document.getElementById('hb');
   const reb = document.getElementById('rb');
   
   const highlightDiv = () => {
      ele.classList.add('highlighted');
   };
   
   const resetDiv = () => {
      ele.classList.remove('highlighted');
   }; 
   hib.addEventListener('click', highlightDiv);
   reb.addEventListener('click',function resetAndRemove(){
      resetDiv();
      hib.removeEventListener('click', highlightDiv);
      reb.removeEventListener('click', resetAndRemove);
   });
</script>
</body>
</html>

Supported Browsers

Method
removeEventListener()	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page