HTML DOM dogodki

HTML DOM omogoča, da se JavaScript odziva na dogodke elementov na spletni strani. Dogodek pomeni, da se je nekaj zgodilo, na primer klik na gumb, sprememba vrednosti vnosnega polja, nalaganje dokumenta ali premik kazalca nad element. V sodobni kodi lahko dogodke povežemo z dogodkovnimi atributi v oznakah HTML, z lastnostmi, kot je onclick, ali pa z metodo addEventListener(), ki je praviloma najbolj prilagodljiva rešitev.

Osnovna pravila

• Dogodek pomeni, da se je v dokumentu ali na elementu zgodilo določeno dejanje.
• Dogodek lahko povežemo neposredno v oznaki HTML, prek lastnosti elementa ali z metodo addEventListener().
• Dogodki niso omejeni le na klik, ampak vključujejo tudi dogodke tipkovnice, obrazcev, nalaganja, kazalca in druge.
• Dogodek change se sproži, ko je sprememba vrednosti potrjena oziroma zaključena, ne pa nujno ob vsakem vnesenem znaku.
• Pri spremembi navadnega besedila v elementu je praviloma primernejša lastnost textContent.

Primerjave

Pogosti dogodki so na primer klik uporabnika, nalaganje dokumenta, sprememba vnosnega polja, pošiljanje obrazca, pritisk tipke ali premik kazalca nad element. Posamezne vrste dogodkov imajo različne namene, zato jih izbiramo glede na vrsto uporabniškega dejanja.

• dogodek klika, na primer click
• dogodek nalaganja, na primer load
• dogodek spremembe vrednosti, na primer change
• dogodki kazalne naprave, na primer mouseover in mouseout
• dogodki tipkovnice, na primer keydown in keyup
• dogodek pošiljanja obrazca, na primer submit

Načini povezovanja dogodkov

Dogodek lahko elementu priredimo na tri pogoste načine. Starejši način je uporaba dogodkovnega atributa v oznaki HTML. Drugi način je uporaba lastnosti, kot je onclick. Tretji in praviloma priporočeni način pa je metoda addEventListener().

Dogodkovni atribut

Dogodek lahko povežemo neposredno v oznaki HTML z atributom, na primer onclick. Ta pristop je kratek, vendar je pri večjih primerih manj pregleden.

<p onclick="this.textContent='Kliknil si me!'">Klikni na ta tekst!</p>

Lastnost dogodka

Dogodek lahko povežemo tudi prek lastnosti elementa, na primer onclick. Tak pristop je uporaben, vendar manj prilagodljiv kot addEventListener().

<p>Klik na gumb kliče funkcijo, ki prikaže čas!</p>
<button id="gumb1" type="button">Klikni me!</button>
<p id="primer4"></p>

<script>
document.getElementById("gumb1").onclick = prikaziDatum1;

function prikaziDatum1() {
   document.getElementById("primer4").textContent = new Date().toString();
}
</script>

addEventListener()

Metoda addEventListener() je priporočeni sodobni način za registracijo dogodkov. Omogoča jasnejšo ločitev med zgradbo dokumenta in programsko kodo ter omogoča tudi več poslušalcev za isti dogodek na istem elementu.

<p>Klik na gumb kliče funkcijo, ki prikaže čas!</p>
<button id="gumb2" type="button">Klikni me!</button>
<p id="primer5"></p>

<script>
document.getElementById("gumb2").addEventListener("click", function () {
   document.getElementById("primer5").textContent = new Date().toString();
});
</script>

Dogodek change

Dogodek change se pri vnosnih elementih sproži, ko uporabnik spremeni vrednost in je sprememba potrjena oziroma zaključena. Zato ni vedno primeren za sprotno odzivanje na vsak vneseni znak. V takih primerih pogosto uporabimo dogodek input.

<script>
function velikiZnaki() {
   let vPolje = document.getElementById("ime");
   vPolje.value = vPolje.value.toUpperCase();
}
</script>

Vpiši ime: <input type="text" id="ime" onchange="velikiZnaki()">

Ko zapustimo vnosno polje po vpisu podatkov, dogodek change pokliče funkcijo, ki vse vpisane znake pretvori v velike črke.

Miškini dogodki

Dogodka mouseover in mouseout uporabimo, ko želimo zaznati, da je kazalec prišel nad element ali ga zapustil. Pri takih primerih pogosto spreminjamo slog ali vsebino elementa.

<div onmouseover="mNad(this)" onmouseout="mStran(this)" style="background-color:#D94A38; width:140px; height:35px; padding:10px; color:#ffffff;">Zapelji miško name!</div>

<script>
function mNad(obj) {
   obj.style.backgroundColor = "#FC9494";
   obj.style.color = "#000000";
   obj.textContent = "Ojlaaaa!";
}

function mStran(obj) {
   obj.style.backgroundColor = "#D94A38";
   obj.style.color = "#ffffff";
   obj.textContent = "Hvala!";
}
</script>

Priporočila

• Za večino sodobnih primerov uporabi addEventListener().
• Dogodek izberi glede na namen, na primer click, change, input ali submit.
• Pri spreminjanju navadnega besedila v elementu praviloma uporabljaj textContent.
• Funkcije za obdelavo dogodkov poimenuj pregledno, da je njihov namen razviden.
• Dogodke dodajaj na elemente, ki že obstajajo v dokumentu ali pa jih poveži po nalaganju dokumenta.

Pogoste napake

• Dogodek change se uporablja tam, kjer bi bil za sprotno odzivanje primernejši dogodek input.
• Vsi dogodki se povezujejo samo z atributi v oznakah HTML, čeprav je metoda addEventListener() praviloma preglednejša.
• Za spremembo navadnega besedila se uporablja innerHTML, čeprav je praviloma primernejša lastnost textContent.
• Predpostavi se, da se bo isti element enako obnašal pri vseh vrstah uporabniških dejanj, ne glede na vrsto dogodka.
• Dogodek se poskuša povezati z elementom, ki v trenutku izvajanja še ni na voljo v dokumentu.