Tapahtumankäsittelijöiden sitominen elementteihin JavaScriptissä

Opitaan nyt tekemään DOM-elementeistämme reagoivia sivuston käyttäjän toimintoihin. Esimerkiksi, käyttäjä napsauttaa johonkin hiirellä, ja meidän koodimme puolestaan käsittelee tämän napsautuksen ja tulostaa näytölle jotain tietoa.

Käyttäjän toiminnot, joita voimme seurata JavaScriptin avulla, kutsutaan tapahtumiksi. Tapahtumat voivat olla esimerkiksi: hiiren napsautus sivuston elementtiin, hiiren vienti sivuston elementin päälle tai päinvastoin - hiiren kohdistimen poistuminen elementistä ja niin edelleen. Lisäksi on olemassa käyttäjän toiminnoista riippumattomia tapahtumia, esimerkiksi tapahtuma, joka liittyy HTML-sivun latautumiseen selaimeen.

Tehdään esimerkkinä painike, jota napsautettaessa näytölle tulostuu jotain tekstiä. Aluksi luodaan painikkeen HTML-koodi:

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

Haetaan nyt viite painikkeeseen muuttujaan:

let button = document.querySelector('#button');

Nyt meidän on määritettävä painikkeemme reaktio napsautuksen yhteydessä. Tätä varten JavaScriptissä on olemassa erityinen metodi addEventListener, joka ottaa ensimmäisenä parametrina tapahtuman nimen (painikkeen napsautuksen nimi on 'click'), ja toisena parametrina - funktion-callbackin, joka suoritetaan, kun tapahtuma sattuu.

Esimerkiksi, tulostetaan napsautettaessa painiketta jotain tekstiä:

button.addEventListener('click', function() {
	console.log('!!!');
});

Annettu 3 painiketta:

<input id="button1" type="submit">
<input id="button2" type="submit">
<input id="button3" type="submit">

Tee niin, että ensimmäistä painiketta napsautettaessa näytölle tulostuu luku 1, toista painiketta napsautettaessa - luku 2, ja kolmatta painiketta napsautettaessa - luku 3.