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()">
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>