Přiřazování obslužných rutin k prvkům v JavaScriptu

Nyní se naučme, jak donutit naše DOM prvky reagovat na akce uživatele webu. Například, uživatel kamkoli klikne myší a náš kód by na to měl reagovat, zpracovat toto kliknutí a zobrazit na obrazovce nějakou informaci.

Akce uživatele, které můžeme sledovat pomocí JavaScriptu, se nazývají události. Události mohou být následující: kliknutí myší na prvek stránky, najetí myší na prvek stránky nebo naopak - opuštění kurzoru myši z prvku a tak dále. Kromě toho existují události, které nezávisí na akcích uživatele, například událost načtení HTML stránky do prohlížeče.

Jako příklad udělejme tlačítko, po jehož kliknutí se na obrazovku vypíše nějaký text. Nejprve vytvořme HTML kód tlačítka:

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

Nyní získáme odkaz na tlačítko do proměnné:

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

Nyní musíme nastavit reakci našeho tlačítka při kliknutí na něj. K tomu v JavaScriptu existuje speciální metoda addEventListener, která jako první parametr přijímá název události (kliknutí na tlačítko má název 'click'), a jako druhý parametr - funkci zpětného volání, která se provede při výskytu této události.

Pojďme například po kliknutí na tlačítko zobrazit nějaký text:

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

Jsou dána 3 tlačítka:

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

Zařiďte, aby po kliknutí na první tlačítko se na obrazovce vypsalo číslo 1, po kliknutí na druhé - číslo 2, a po kliknutí na třetí - číslo 3.