Tapahtumien irrottaminen JavaScriptissä

Tässä oppitunnissa opimme irrottamaan tapahtumankäsittelijät, jotka aiemmin on liitetty elementteihin. Olkoon esimerkkinä seuraava painike:

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

Liitetään tähän painikkeeseen funktio func:

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

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

Tehdään nyt niin, että tapahtumankäsittelijä toimii ensimmäisellä napsautuksella, minkä jälkeen se irrotetaan painikkeesta. Tätä varten on olemassa erityinen metodi removeEventListener. Tämä metodi ottaa ensimmäisenä parametrina tapahtuman tyypin ja toisena - viittauksen irrotettavaan funktioon.

Yleensä tämä tarkoittaa, että tapahtumankäsittelijä irrotetaan samalla tavalla kuin se on liitetty. Eli jos olemme liittäneet sen näin: addEventListener('click', func), niin irrotamme samoilla parametreilla, näin: removeEventListener('click', func).

Ratkaistaan siis asettamamme tehtävä:

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

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