Povezivanje rukovaoca događaja sa elementima u JavaScript-u

Hajde sada da naučimo naše DOM elemente da reaguju na akcije korisnika sajta. Na primer, korisnik će kliknuti mišem negde, a naš kod treba da obradi taj klik i prikaže neku informaciju na ekranu.

Akcije korisnika koje možemo da pratimo preko JavaScript-a zovu se dogadajima. Dogadaji mogu biti sledeći: klik mišem na element strane, prelazak mišem preko elementa strane ili obrnuto - napuštanje kursora miša sa elementa i tako dalje. Pored toga, postoje događaji koji ne zavise od akcija korisnika, na primer, događaj kada se HTML strana učita u pretraživač.

Hajde za primer da napravimo dugme, čijim klikom će se na ekran prikazati neki tekst. Za početak hajde da napravimo HTML kod dugmeta:

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

Sada ćemo dobiti referencu na dugme u promenljivu:

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

Sada nam je potrebno da postavimo reakciju našeg dugmeta na klik. Za ovo u JavaScript-u postoji posebna metoda addEventListener, koja kao prvi parametar prima naziv događaja (klik na dugme ima naziv 'click'), a kao drugi parametar - funkciju-povratni poziv (callback), koja se izvršava kada se taj događaj dogodi.

Hajde, na primer, da na klik dugmeta prikažemo neki tekst:

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

Date su 3 dugmeta:

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

Uredite tako da se klikom na prvo dugme na ekran prikaže broj 1, klikom na drugo - broj 2, a klikom na treće - broj 3.