Fjerning av event listeners i JavaScript

I denne leksjonen vil vi lære hvordan vi fjerner event handlers som tidligere er blitt koblet til elementer. La oss for eksempel ha følgende knapp:

html<input id="button" type="submit">

La oss koble funksjonen func til denne knappen:

javascriptlet button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
  console.log('!!!');
}

La oss nå gjøre slik at event handleren utløses på det første klikket, og deretter fjernes fra knappen. For dette finnes det en spesiell metode removeEventListener. Denne metoden tar førsteparameteren som type event, og andreparameteren som en referanse til funksjonen som skal fjernes.

Som regel betyr dette at event handleren fjernes på samme måte som den ble koblet til. Det vil si, hvis vi koblet den til slik: addEventListener('click', func), så fjerner vi den med de samme parameterne, slik: removeEventListener('click', func).

Så, la oss løse oppgaven vi har satt oss:

javascriptlet button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
  console.log('!!!');
  this.removeEventListener('click', func);
}