Načrtovanje in razvoj spletnih aplikacij

HTML DOM dogodki

HTML DOM JavaScriptu omogoča, da se odziva na HTML dogodke. To storimo tako, da HTML elementom dodamo atribut, kot npr. onclick="koda JavaScript", onload="koda JavaScript", onchange="koda JavaScript", onmouseover="koda JavaScript", onmouseout="koda JavaScript", itd.

Dogodki HTML elementov

Primeri HTML dogodkov:

  • ko uporabnik klikne z miško
  • ko se spletna stran naloži
  • ko se naloži slika
  • ko se kurzor miške premakne nad element
  • ko se spremeni vnosno polje obrazca
  • ko je odposlan HTML obrazec
  • ko uporabnik pritisne tipko

Primer, ko se spremeni vsebina odstavka, ko ga uporabnik klikne:

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

Klikni na ta tekst!

Primer, ko vsebino odstavka spremenimo s klikom, ki pokliče funkcijo:

<p onclick="spremeniOdstavek(this)">Klikni na ta tekst!</p>
<script>
   function spremeniOdstavek(odstavek) { 
      odstavek.innerHTML = "Kliknil si me!";
   }
</script>

Klikni na ta tekst!

Dogodkovni atributi HTML elementov

Da priredimo dogodek HTML elementu uporabimo dogodkovne atribute, ki so lahko:

  • dogodki miške
  • dogodki tipkovnice
  • dogodki okvirjev/objektov
  • dogodki obrazcev
  • dogodki vleci/spusti
  • dogodki odložišča
  • dogodki tiskanja
  • multimedijski dogodki
  • dogodki animacij
  • dogodki tranzicij
  • dogodki serverja
  • razni dogodki
  • dogodki dotika
  • itd

Več o HTML DOM dogodkih si lahko ogledate na w3schools.


Primer prireditve dogodka z atributom:

<p>Klikni gumb za prikaz časa!</p>
<button onclick="prikaziDatum()">Trenutni čas je?</button>
<p id="primer"></p>
<script>
   function prikaziDatum() {
      document.getElementById("primer").innerHTML = Date(); 
   } 
</script>

Klikni gumb za prikaz časa!

Primer prireditve dogodka s HTML DOM:

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

<script>
   document.getElementById("gumb").onclick = prikaziDatum;
   function prikaziDatum() {
      document.getElementById("primer").innerHTML = Date(); 
   } 
</script>

Klik na gumb kliče funkcijo, ki prikaže čas!

Primer prireditve dogodka ob zagonu strani:

<body onload="prikaziDatum()">
<p id="primer"></p> <script> function prikaziDatum() { document.getElementById("primer").innerHTML = Date(); } </script>

     Prikaz strani v novem oknu.


Primer prireditve dogodka ob spremembi elementa:

<script> 
   function velikiZnaki() {     
      var vPolje = document.getElementById("ime");     
      vPolje.value = vPolje.value.toUpperCase(); 
   } 
</script> 
 
Vpiši ime: <input type="text" id="ime" onchange="velikiZnaki()">
Vpiši ime:

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


Primer prireditve miškinega dogodka:

<div onmouseover="mNad(this)" onmouseout="mStran(this)"  style="background-color:#D94A38; 
 width:140px; height:15px; padding:10px; color: #ffffff;"> Zapelji miško name! </div> 
  
<script> 
   function mNad(obj) { 
      obj.style.backgroundColor = "#FC9494"; 	
      obj.style.color = "#000000";
      obj.innerHTML = "Ojlaaaa!"; 
   } 
   function mStran(obj) {
      obj.style.backgroundColor="#D94A38";
      obj.style.color = "#ffffff";
      obj.innerHTML="Hvala!";
   } 
</script>
Zapelji miško name!