<img src="kuvat/toveruus.gif" id="vaihdettava"
onMouseOut="kuva.src = 'kuvat/toveruus.gif';"
onMouseOver="kuva.src = 'kuvat/toveruus2.gif';" />
<script language="JavaScript">
var kuva = document.getElementById("vaihdettava");
</script>
Tapahtumafunktiot (EventHandler) reagoivat dokumentin tapahtumiin. Tapahtumia voivat olla esimerkiksi hiiren tietyt liikkeet, käyttäjän syötteet jne. Tapahtuma käynnistää ohjelmoidun toiminnan. Jos HTML-elementti käsittelee jotain tapahtumaa, voit yleensä liittää siihen tapahtumafunktion.
Tapahtumafunktio kirjoitetaan HTML-elementin parametriksi. Muoto on tällöin
<tag eventHandler="JavaScript-koodi">
Esimerkiksi tämän sivun body-elementissä on tapahtumafunktio, joka avasi pienen tervetuloikkunan:<body onLoad="window.alert('Tervetuloa sivulle!')" >
onLoad -tapahtumafunktion määräämät asiat tapahtuvat siis, kun sivu latautuu.
Tapahtumafunktio voi sisältää minkä tahansa JavaScript-koodin tai funktion kutsun (funktioista seuraavaksi). Jos lausekkeita on useampia, erotetaan ne puolipisteellä.
Seuraavassa joitain tapahtumafunktioita:
| onClick | Hiiren klikatessa elementtiä |
| onMouseDown | Hiiren napin mennessä pohjaan |
| onMouseUp | Hiiren napin tullessa ylös |
| onMouseOver | Hiiren tullessa elementin päälle |
| onMouseOut | Hiiren lähtiessä elementin päältä |
| onMouseMove | Hiiren liikkuessa |
| onDblClik | Hiirellä tupla-klikatessa |
| onKeyDown | Näppäimistön näppäimen painuessa alas |
| onKeyPress | Näppäimistön näppäintä painaessa |
| onKeyUp | Näppäimistön näppäimen tullessa ylös |
| onLoad | Kun objekti ladataan |
| onResize | Kun näkymän kokoa muutetaan |
| onScroll | Kun näkymää scrollataan |
| onUnload | Kun esim. sivulta lähdetään |
| onChange | Kun esimerkiksi tekstikenttää muutetaan |
| onFocus | Kun esimerkiksi tekstikenttään tullaan kirjoittamaan |
| onBlur | Kun esimerkiksi tekstikentästä poistutaan |
| onSelect | Valitessa esim. tekstikentästä tekstiä |
| onReset | Lomaketta resetoitaessa |
| onSubmit | Kun lomake lähetetään |
<img src="kuvat/toveruus.gif" id="vaihdettava"
onMouseOut="kuva.src = 'kuvat/toveruus.gif';"
onMouseOver="kuva.src = 'kuvat/toveruus2.gif';" />
<script language="JavaScript">
var kuva = document.getElementById("vaihdettava");
</script>
|
|
Esimerkissä on huomattava, että kuvaobjektiin on laitettu kaksi tapahtumafuntiota.
Yksi tapahtumaan, jossa hiiri tulee kuvan päälle ja toinen, kun hiiri lähtee kuvan päältä.
Toinen huomattava seikka on se, että muuttujaan kuva voidaan sijoittaa haluttu img -objekti
vasta, kun kuva on sijoitettu dokumenttiin... ts. sijoittamisen tekevä scripti on
vasta kuvan jälkeen.