Hogyan törölhetjük az eseményfigyelőt?

Egy eseménykezelő eltávolításához a removeEventListener() módszert használjuk. Ez a módszer ugyanazokat a három argumentumot fogadja, mint az addEventListener():

1. Eseménytípus (string, például 'click', 'mouseover').
2. A hozzárendelt kezelőfüggvény referencia.
3. Opcionális objektum vagy logikai érték, amely a fázist (elfogás vagy buborékzás) jelzi. Meg kell egyeznie a hozzáadáskor használt értékkel.

Fontos: a sikeres eltávolításhoz pontosan ugyanarra a függvényreferenciára van szükség, mint amit hozzáadáskor használtak. Az "anonim" függvények, amelyek "éppen most" lettek létrehozva, nem távolíthatók el így.

Példa:

// Elem lekérése
const element = document.getElementById('myButton');

// Kezelőfüggvény definiálása
function handleClick() {
  console.log('Gomb megnyomva!');
}

// Hozzáadás
element.addEventListener('click', handleClick);

// ...kód...

// Eltávolítás
element.removeEventListener('click', handleClick);

Ha a kezelő hozzáadásakor opciókkal történt, például useCapture: true, akkor ezeket is meg kell adni az eltávolításkor:

element.addEventListener('click', handleClick, { capture: true });

// ...

element.removeEventListener('click', handleClick, { capture: true });

Ha a harmadik argumentum el lett hagyva az adáskor (alapértelmezett érték false), akkor az eltávolításkor is el lehet hagyni vagy false-ra lehet állítani:

element.addEventListener('click', handleClick); // useCapture: false alapértelmezett

// ...

element.removeEventListener('click', handleClick);
element.removeEventListener('click', handleClick, false); // ekvivalens