Tapahtumien irrottaminen JavaScriptissä

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

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

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

let 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ä:

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

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

Annettu linkki ja painike. Painikkeen napsautuksella lisää linkin tekstin loppuun sen href-attribuutin sisältö pyöreissä suluissa. Tee niin, että tämä lisäys tapahtuu vain ensimmäisellä napsautuskerralla.

Annettu painike, jonka arvona on luku 1. Tee niin, että tätä painiketta napsautettaessa sen arvo kasvaa joka kerta yhdellä. Kun painikkeen arvo saavuttaa 10 - irrota tapahtumankäsittelijä, jotta painike ei enää reagoi napsautuksiin.