Hoe verwijder je een event listener?

Om een gebeurtenisafhandelaar te verwijderen, wordt de methode removeEventListener() gebruikt. Deze methode accepteert dezelfde drie argumenten als addEventListener():

Gebeurttype (string, bijvoorbeeld 'click', 'mouseover').
Verwijzing naar de toegewezen handlerfunctie.
Optioneel object of boolean waarde die de fase aangeeft (capturing of bubbling). Moet overeenkomen met die bij het toevoegen.

Belangrijk: om succesvol te verwijderen, moet je precies dezelfde functieverwijzing doorgeven die bij het toevoegen is gebruikt. Anonieme functies die "in het moment" worden gemaakt, kunnen op deze manier niet worden verwijderd.

Voorbeeld:

// Element ophalen
const element = document.getElementById('myButton');

// Handlerfunctie definiëren
function handleClick() {
  console.log('Knop ingedrukt!');
}

// Handler toevoegen
element.addEventListener('click', handleClick);

// ...code...

// Handler verwijderen
element.removeEventListener('click', handleClick);

Als de handler met opties is toegevoegd, bijvoorbeeld useCapture: true, moeten deze ook bij het verwijderen worden gespecificeerd:

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

// ...

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

Als het derde argument bij het toevoegen is weggelaten (standaardwaarde false), kan het ook worden weggelaten bij het verwijderen of op false worden gezet:

element.addEventListener('click', handleClick); // useCapture: false standaard

// ...

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