Povezovanje obravnavalcev z elementi v JavaScript

Zdaj pa naučimo naše DOM elemente, da se odzivajo na dejanja uporabnika spletnega mesta. Na primer, ko uporabnik kamorkoli klikne z miško, naj bo naša koda v odgovoru to klik obdelala in prikazala kakšne informacije na zaslonu.

Dejanja uporabnika, ki jih lahko sledimo prek JavaScript, se imenujejo dogodki. Dogodki so lahko naslednji: klik z miško na element strani, premik miške na element strani ali obratno - odmik kazalca miške z elementa in tako naprej. Poleg tega obstajajo dogodki, ki niso odvisni od dejanj uporabnika, na primer dogodek ob nalaganju HTML strani v brskalnik.

Za primer naredimo gumb, ob kliku na katerega se prikaže kakšno besedilo. Za začetek naredimo HTML kodo gumba:

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

Zdaj pa pridobimo povezavo do gumba v spremenljivko:

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

Zdaj moramo nastaviti reakcijo našega gumba ob kliku nanj. Za to v JavaScript obstaja posebna metoda addEventListener, ki kot prvi parameter sprejme ime dogodka (klik na gumb ima ime 'click'), kot drugi parameter pa - funkcijo-povratni klic, ki se izvede ob pojavu tega dogodka.

Na primer, ob kliku na gumb izpišimo kakšno besedilo:

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

Podani so 3 gumbi:

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

Naredite tako, da ob kliku na prvi gumb na zaslon izpiše število 1, ob kliku na drugi - število 2, ob kliku na tretji gumb pa število 3.