Sündmuste käitlejate sidumine elementidega JavaScriptis

Õpime nüüd oma DOM elemente reageerima veebisaidi kasutaja tegevustele. Näiteks, kui kasutaja klõpsab kuhugi hiirega, siis meie kood peaks vastuseks selle klõpsu töötlema ja ekraanile kuvama mingit teavet.

Kasutaja tegevused, mida saame jälgida läbi JavaScripti, nimetatakse sündmusteks. Sündmused võivad olla järgmised: hiireklõps lehe elemendil, hiirekursori viimine elemendi peale või vastupidi - hiirekursori eemaldumine elemendilt ja nii edasi. Lisaks on olemas sündmused, mis ei sõltu kasutaja tegevustest, näiteks sündmus HTML-lehe laadimisel brauserisse.

Teeme näiteks nupu, millele klõpsates ekraanile kuvatakse mingi tekst. Alustuseks teeme nupu HTML koodi:

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

Hankime nüüd viida nupule muutujasse:

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

Nüüd peame määrama oma nupu reaktsiooni sellel klõpsamisel. Selleks on JavaScriptis olemas spetsiaalne meetod addEventListener, mis esimese parameetrina võtab sündmuse nimetuse (nupule klõpsamise nimetus on 'click'), ja teise parameetrina - callback-funktsiooni, mis käivitatakse selle sündmuse toimumisel.

Väljastame näiteks nupule klõpsates mingi teksti:

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

Antud on 3 nuppu:

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

Tehke nii, et esimesele nupule klõpsates ekraanile kuvataks number 1, teisele klõpsates - number 2, ja kolmandale klõpsates - number 3.