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:

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

Zdaj pa pridobimo povezavo do gumba v spremenljivko:

javascriptlet 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:

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

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