How to remove an event handler?

There are three main methods:

1. Use removeEventListener(): The most common and recommended way. It requires passing the same arguments (event type, handler function, and options) as when adding with addEventListener().

   // Adding example
   const element = document.getElementById('myElement');
   const handler = () => {
     console.log('Clicked');
   };
   element.addEventListener('click', handler);
   
   // Removing example
   element.removeEventListener('click', handler);
   

2. Assign null to the event property: Works only for inline handlers and those assigned via object properties (e.g., onclick).

   // Adding via property
   const element = document.getElementById('myElement');
   element.onclick = () => {
     console.log('Clicked');
   };
   
   // Removing
   element.onclick = null;
   

3. Use removeListener() (Node.js): Used for event handling in Node.js environment (e.g., for EventEmitter instances).

   // Example in Node.js
   const { EventEmitter } = require('events');
   const myEmitter = new EventEmitter();
   
   const handler = () => {
     console.log('Event occurred');
   };
   
   myEmitter.on('myEvent', handler); // Adding
   myEmitter.removeListener('myEvent', handler); // Removing
   

It is important to pass the same handler function reference to removeEventListener and removeListener as was used during addition. Passing an anonymous function or a new function with the same content will not work.