On gists

No need remove event listener

JavaScript

examples.js Raw #

// https://javascript.plainenglish.io/you-dont-need-removeeventlistener-to-remove-dom-event-listeners-12db93cd8bf6

// 1. once

document.querySelector('#btn').addEventListener('click', () => {
  console.log('clicked');
}, {once: true});


// 2. AbortController
const controller = new AbortController();

document.querySelector('#btn').addEventListener('click', () => {
  console.log('clicked');
}, { signal: controller.signal });

// abort the listener!
controller.abort();


// or
const controller = new AbortController();
const { signal } = controller;

document.querySelector('#btn').addEventListener('click', () => {
  console.log('clicked');
}, { signal });

document.querySelector('#btn').addEventListener('mouseenter', () => {
  console.log('mouseenter');
}, { signal })

window.addEventListener('scroll', () => {
  console.log('scroll');
}, { signal })

// Remove all listeners at once:
controller.abort();


// 3. clone element
const button = document.querySelector('#btn');
button.replaceWith(button.cloneNode(true));