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.
Ga maar eens met de muis op de onderstaande link staan:
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.