Dogodki v JavaScriptu

Dogodki v JavaScriptu omogočajo, da se program odzove na dejanja uporabnika ali na spremembe v dokumentu in okolju izvajanja. S pomočjo dogodkov lahko določimo, kaj naj se zgodi ob kliku, tipkanju, spremembi vrednosti obrazca, nalaganju strani, premikanju kazalca in v številnih drugih primerih.

Osnovna pravila

• Dogodek je obvestilo, da se je v dokumentu ali okolju zgodilo nekaj pomembnega.
• Dogodek lahko sproži uporabnik, brskalnik ali sam dokument.
• Dogodek obdelamo s funkcijo, ki jo povežemo z elementom ali objektom.
• Objekt dogodka vsebuje podatke o sproženem dogodku.
• Privzeto dejanje dogodka lahko po potrebi preprečimo z metodo preventDefault().

Primerjave

Osnovni način povezovanja dogodkov

Dogodek lahko povežemo neposredno v oznaki HTML, na primer z lastnostjo onclick, ali pa v JavaScriptu z metodo addEventListener(). Prvi način je primeren za zelo kratke zglede, drugi pa je v sodobni kodi praviloma preglednejši in prožnejši. Omogoča tudi, da istemu elementu priredimo več poslušalcev za isti dogodek.

<button id="gumb1" type="button">Klikni me</button>
<script>
{
   const gumb = document.getElementById("gumb1");

   gumb.addEventListener("click", function () {
      window.alert("Gumb je bil kliknjen.");
   });
}
</script>

Dogodki miške

Dogodki miške opisujejo dejanja, povezana s klikanjem, pritiskom tipke miške, premikanjem kazalca in vrtenjem kolesca. Nekateri dogodki se sprožijo nad samim elementom, drugi pa tudi pri premiku prek njegovih otrok.

<p id="primer1"></p>
<button id="gumbKlik" type="button">En klik</button>
<button id="gumbDvojniKlik" type="button">Dvojni klik</button>

<script>
{
   const izpis = document.getElementById("primer1");
   const gumbKlik = document.getElementById("gumbKlik");
   const gumbDvojniKlik = document.getElementById("gumbDvojniKlik");

   gumbKlik.addEventListener("click", function () {
      izpis.textContent = "Izveden je bil en klik.";
   });

   gumbDvojniKlik.addEventListener("dblclick", function () {
      izpis.textContent = "Izveden je bil dvojni klik.";
   });
}
</script>

Dogodki kazalca

Dogodki kazalca omogočajo enoten model za miško, dotik in pisalo. Pri sodobnih uporabniških vmesnikih so pogosto primerna izbira, ker lahko z eno skupino dogodkov obravnavamo različne vrste vhodnih naprav.

<p id="primer2">Klikni ali se dotakni okvirja.</p>
<div id="poljeKazalca" style="width:220px; padding:12px; border:1px solid #999;">
   Aktivno območje
</div>

<script>
{
   const polje = document.getElementById("poljeKazalca");
   const izpis = document.getElementById("primer2");

   polje.addEventListener("pointerdown", function () {
      izpis.textContent = "Dogodek pointerdown je bil sprožen.";
   });
}
</script>

Dogodki tipkovnice

Dogodki tipkovnice se uporabljajo pri odzivu na pritisk in spust tipk. V sodobni kodi sta praviloma najpomembnejša dogodka keydown in keyup. Dogodek keypress je starejši in danes ni več osrednja priporočena izbira.

<p id="primer3">Pritisni poljubno tipko.</p>
<input id="vnosTipka" type="text">

<script>
{
   const vnos = document.getElementById("vnosTipka");
   const izpis = document.getElementById("primer3");

   vnos.addEventListener("keydown", function (dogodek) {
      izpis.textContent = "Pritisnjena tipka: " + dogodek.key;
   });
}
</script>

Dogodki obrazca

Dogodki obrazca so pomembni pri vnosu podatkov, preverjanju pravilnosti in pošiljanju obrazca. Posebej pomembna je razlika med dogodkoma input in change. Dogodek input se sproža sproti ob spreminjanju vrednosti, dogodek change pa ob potrjeni spremembi.

<p id="primer4"></p>
<input id="imeUporabnika" type="text" placeholder="Vnesi ime">

<script>
{
   const polje = document.getElementById("imeUporabnika");
   const izpis = document.getElementById("primer4");

   polje.addEventListener("input", function () {
      izpis.textContent = "Trenutni vnos: " + polje.value;
   });
}
</script>

Dogodki strani

Dogodki strani opisujejo spremembe stanja dokumenta in okna. Za pripravo kode po zgraditvi dokumenta je pogosto posebej uporaben DOMContentLoaded, medtem ko load čaka tudi na nalaganje drugih virov strani. Dogodek visibilitychange se sproži, ko dokument postane viden ali skrit.

<p id="primer5">Stran se še pripravlja.</p>
<script>
document.addEventListener("DOMContentLoaded", function () {
   document.getElementById("primer5").textContent = "Dokument HTML je pripravljen.";
});
</script>

Dogodki odložišča

Dogodki odložišča so pomembni pri delu z besedilom in drugimi podatki, ki jih uporabnik kopira, izreže ali prilepi.

Dogodki zgodovine in stanja

Nekateri dogodki so povezani z naslovom strani, zgodovino brskalnika, shrambo ali povezljivostjo.

Preprečevanje privzetega dejanja

Privzeto dejanje dogodka lahko preprečimo z metodo preventDefault(). To uporabimo na primer pri obrazcih, kadar želimo pošiljanje najprej preveriti z JavaScriptom.

<form id="obrazec1">
   <button type="submit">Pošlji</button>
</form>
<p id="primer6"></p>

<script>
{
   const obrazec = document.getElementById("obrazec1");
   const izpis = document.getElementById("primer6");

   obrazec.addEventListener("submit", function (dogodek) {
      dogodek.preventDefault();
      izpis.textContent = "Pošiljanje obrazca je bilo v tem zgledu preprečeno.";
   });
}
</script>

Priporočila

• Dogodke praviloma povezuj z metodo addEventListener().
• Pri tipkovnici praviloma uporabljaj keydown in keyup.
• Pri obrazcih jasno loči med dogodkoma input in change.
• Kadar želiš enoten odziv za miško, dotik in pisalo, razmisli o dogodkih kazalca.
• Pri obdelavi obrazcev in povezav po potrebi uporabi preventDefault().
• Za stanje vidnosti strani pogosto razmisli o dogodku visibilitychange.

Pogoste napake

• Daljša logika je zapisana neposredno v lastnostih, kot je onclick, zaradi česar je dokument manj pregleden.
• Dogodek keypress je uporabljen kot osrednji dogodek tipkovnice, čeprav to ni več najprimernejša sodobna izbira.
• Dogodka input in change se obravnavata kot enakovredna, čeprav se sprožita v različnih trenutkih.
• Pri delu z obrazci se pričakuje preprečitev privzetega dejanja, vendar metoda preventDefault() ni uporabljena.
• Dogodki miške so uporabljeni v primerih, kjer bi bil za več vrst vhodnih naprav primernejši dogodek kazalca.
• Pri zapuščanju strani se brez premisleka uporablja unload, čeprav to ni vedno najprimernejša sodobna izbira.