Pripájanie obslužných rutín k prvkom v JavaScripte

Poďme sa teraz naučiť, ako môžu naše DOM prvky reagovať na akcie používateľa webovej stránky. Napríklad, používateľ niekde klikne myšou a náš kód by mal na toto kliknutie reagovať a zobraziť na obrazovke nejaké informácie.

Akcie používateľa, ktoré môžeme sledovať prostredníctvom JavaScriptu, sa nazývajú udalosti. Udalosti môžu byť nasledovné: kliknutie myšou na prvok stránky, prejdenie myšou nad prvkom stránky alebo naopak - odchod kurzora myši z prvku a tak ďalej. Okrem toho existujú udalosti, ktoré nezávisia od akcií používateľa, napríklad udalosť pri načítaní HTML stránky do prehliadača.

Urobme si napríklad tlačidlo, po kliknutí na ktoré sa na obrazovke zobrazí nejaký text. Najprv vytvorme HTML kód tlačidla:

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

Teraz získame odkaz na tlačidlo do premennej:

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

Teraz musíme nastaviť reakciu nášho tlačidla pri kliknutí naň. Na to v JavaScripte existuje špeciálna metóda addEventListener, ktorá ako prvý parameter prijíma názov udalosti (kliknutie na tlačidlo má názov 'click'), a ako druhý parameter - funkciu-spätné volanie, ktorá sa vykoná pri výskyte tejto udalosti.

Poďme napríklad po kliknutí na tlačidlo vypísať nejaký text:

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

Dané sú 3 tlačidlá:

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

Zaistite, aby po kliknutí na prvé tlačidlo sa na obrazovke vypísalo číslo 1, po kliknutí na druhé - číslo 2, a po kliknutí na tretie - číslo 3.