JavaScript-opas

JAVASCRIPTIIN LIITTYVÄÄ KOULUTUSTA v.2008

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi jo tänään. IT-koulutuksen asiantuntijasi, Koulutus- ja konsultointipalvelu KK Mediat

Tapahtumat HTML- ja XHTML-kielissä ja niihin reagoiminen JavaScriptin kautta

HTML /XHTML tarjoaa elementeille joukon perustapahtumia, joista käsin voidaan kutsua suoritettavaa koodia. Tapahtumaa kutsutaan aivan samoin kuin elementtien ominaisuuksia eli syntaksilla:

Info! HTML-kielessä tapahtuma-attribuutin nimi kirjoitetaan siten, että tapahtuvan määrittävä osa alkaa isolla kirjaimella, esim. onClick. XHTML:ssä tapahtuma-attribuutit kirjoitetaan aina kokonaan pienillä kirjaimilla, siis esim. onclick.


<elementti tapahtuma="arvo">... </elementti>

Osa tapahtumista on sidottu vain tiettyihin elementteihin tai elementtiryhmiin, kuten dokumentin runkoon (body) tai lomake-elementteihin. HTML4.0 / XHTML- standardin mukaisia mahdollisia tapahtumia ovat:

Ikkunoihin (tai kehyksiin) kohdistuvat tapahtumat:


onload; sivun latautuminen
onunload; sivulta poistuminen

Lomake-elementteihin liittyvät tapahtumat:


onblur; kursorin poistuminen
onchange; lomakkeen kentän muutos
onfocus; fokuksen saaminen
onselect; lomakkeen kentän joutuminen valituksi
onsubmit; lomakkeen lähettäminen
onreset ; lomakkeen tyhjennys

Näppäimistötapahtumat (ei voida sijoittaa elementteihin base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title):


onkeydown; kun näppäin on alhaalla
onkeypress; kun näppäintä painetaan
onkeyup; kun näppäin vapautetaan

Hiiren tapahtumat (ei voida sijoittaa elementteihin base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title):


onclick; hiiren klikkaus
ondblclick; hiiren kaksoisklikkaus
onmousedown; kun hiiren painike on alhaalla
onmousemove; kun hiiri liikkuu elementin yllä
onmouseout; kun hiiri poistuu elementin yltä
onmouseover; hiiren liikkuminen elementin yllä
onmouseup; kun hiiren painike vapautuu

Esimerkiksi alla oleva koodinpätkä kutsuu hiiren klikkauksella sivulla aiemmin määriteltyä funktiota checkMe, jolle se välittää parametrina lomake-olion:


<input type="button" onclick="checkMe(this.form);"></input>

Joidenkin tapahtumien yhteydessä voidaan määritellä palautusarvo komennolla return. Jos palautusarvoksi annetaan true, niin toiminto toteutetaan. Jos arvona puolestaan on false, toimintoa ei toteuteta. Esimerkiksi:


<form action="kasittele.asp" onSubmit="if (lomake.nimi.length !=0){return=true;} else {return=false;}">

Tutustu artikkelin muihin osiin:
»»» JavaScript »»» Koodin upottaminen dokumenttiin
»»» JavaScript »»» HTML/XHTML:n tapahtumat

JavaScript-opas

Tapahtumat HTML- ja XHTML-kielissä ja niihin reagoiminen JavaScriptin kautta

Tallenna tämä sivu kirjanmerkkeihin!