Les 6

Events en Event Handlers

Met behulp van events kun je JavaScript laten reageren op bepaalde acties van de bezoeker.
Hiermee kan je voor meer interactiviteit zorgen op een bepaalde pagina.
Een event kan bijvoorbeeld zijn: een bezoeker die met de muis over een link beweegt, of als een pagina in de browser van de bezoeker geladen wordt.

Nadat zo'n event zich voordoet, wordt er een JavaScript code uitgevoerd in de browser.
Deze code wordt ook wel een event handler genoemd.

Hieronder zie je een overzichtje van enkele veelgebruikte events in JavaScript.

Event-naam:	Omschrijving:
onClick=" "	De muis klikt ergens op (bijv. een link)
onLoad=" "	Als de pagina geladen is
onUnload=" "	Als er een ander bestand geladen wordt in het browservenster
onMouseOver=" "	De muis beweegt over een link
onMouseOut=" "	De muis gaat van een link af
onSelect=" "	Als tekst geselecteerd wordt
onSubmit=" "	Verzendknop van een formulier wordt ingedrukt
onChange=" "	Inhoud van een veld veranderd (bijv. in formulier)

Een aantal van deze events zal je wellicht al bekend voorkomen.
Waarschijnlijk heb je zelf het gebruik van de onLoad en onUnload events wel eens ondervonden bij het bezoeken van een site.
Deze events worden namelijk veel gebruikt bij het maken van pop-ups en pop-unders.
Je zult dat waarschijnlijk irritant gevonden hebben en ik raad je dan ook aan zeer spaarzaam gebruik te maken van pop-ups en pop-unders.

Tot slot van deze les een voorbeeld van een onMouseOver en een onMouseOut event.

Voorbeeld onMouseOver en onMouseOut Event

Ga maar eens met de muis op de onderstaande link staan:

Plaats de muiscursor hier!

Als het goed is verschijnt er een venster waarin staat: Dit is een onMouseOver event!.
Klik op Ok en beweeg de muis van de link af.
Nu verschijnt er een venster met de tekst: En dit een onMouseOut event!!.

Dit is de code voor het bovenstaande voorbeeld:

<a href="#" onMouseOver="alert('Dit is een onMouseOver event!');" onMouseOut="alert('En dit een onMouseOut event!!');">Plaats de muiscursor hier!</a>

In de bovenstaande code heb ik de link nergens naartoe laten gaan, omdat het slechts een voorbeeld is.
De code spreekt verder wel voor zich: bij een onMouseOver event wordt er een alert-venster getoond met de tekst die daarvoor is opgegeven. Hetzelfde gebeurt dan weer bij een onMouseOut event.

Einde Les 6

Dit is het einde van deze les.
Dit is voorlopig ook het einde van de JavaScript cursus op deze site.
De meeste grondbeginselen zijn inmiddels wel aan de orde gekomen.
Waarschijnlijk zal ik deze cursus in de loop der tijd nog wat verder uitbreiden met o.a. een les over het Document Object Model (DOM) en een aantal lessen met uitleg over het maken van wat veelgebruikte, praktische scripts.

Tot die tijd kun je zelf aan de slag met het maken van je eigen scripts.
Een goede tip die ik je daarbij kan geven is om vooral de bron te bekijken van andere scripts!
Je kunt allerlei sites met gratis JavaScripts vinden op deze pagina.
Experimenteer volop met die scripts en je zult al gauw je eigen scripts kunnen maken.

MijnHomepage Tip