Events zijn gebeurtenissen die door JavaScript opgemerkt worden, waardoor bij het optreden van zo'n gebeurtenis JavaScript code kan uitvoeren. M.a.w. JavaScript reageert op gebeurtenissen (events) met een actie (event handle).

De events worden in de HTML tags geplaatst.

Voorbeelden van events:

  • een muisklik
  • een pagina of afbeelding laden
  • een onderdeel met de muis aanwijzen
  • een veld in een formulier selecteren
  • een formulier verzenden
  • een toets indrukken

Opmerking: Events worden meestal in combinatie met functies gebruikt. De functie wordt dan pas uitgevoerd na het voorkomen van de gebeurtenis (event).

De belangrijkste events

onLoad en onUnload

De onLoad en onUnload zijn gebeurtenissen die voorkomen bij het betreden en verlaten van een webpagina.

De onLoad gebeurtenis kan gebruikt worden om het gebruikte browsertype en browserversie te achterhalen en daar gepast op te reageren.

De onLoad en onUnload gebeurtenissen worden vaak gebruikt in combinatie met cookies die aangemaakt worden bij het betreden of verlaten van een pagina. Voorbeeld: bij het eerste bezoek aan een webpagina kan naar de gewenste taal gevraagd worden. Na het opgeven wordt de gewenste taal in een cookie opgeslagen.

onFocus, onBlur en onChange

De onFocus, onBlur en onChange gebeurtenissen worden veel gebruikt voor het valideren van formuliervelden.

De onFocus event wordt actief als de gebruiker een formulierveld activeert om het in te vullen. De onBlur event wordt actief als ge gebruiker een formulierveld verlaat om een ander formulierveld te activeren.

Het voorbeeld maakt gebruik van de onChange event. De functie controleerEmail() wordt uitgevoerd bij het aanpassen van het tekstveld.

<input type="text" size="30" id="email" onchange="controleerEmail()" />

onSubmit

De onSubmit gebeurtenis wordt gebruikt om alle formuliervelden voor het verzenden te valideren.

Het voorbeeld toont de werking van het onSubmit event. De functie controleerFormulier wordt uitgevoerd als de gebruiker op de knop Verzenden van het formulier klikt. Als de formuliervelden niet correct zijn ingevuld, gaat het verzenden niet door. De functie controleerFormulier() geeft true (alles in orde) of false (niet alles in orde) terug. Bij true wordt het formulier verzonden, bij false wordt het verzenden afgebroken en kan de gebruiker zijn invoer corrigeren.

<form method="post" action="form.php" onsubmit="return controleerFormulier()">

onMouseOver en onMouseOut

Bij het aanwijzen van een HTML onderdeel ontvangt JavaScript een onMouseOver gebeurtenis.

Bij het verlaten van een aangewezen HTML onderdeel ontvangt JavaScript een onMouseOut gebeurtenis. Deze laatste gebeurtenis wordt veel gebruikt om een onMouseOver actie terug ongedaan te maken.

Voorbeeld: Bij het aanwijzen van een knop wordt de achtergrondkleur aangepast (onMouseOver). Bij het met de muiswijzer verlaten van de knop wordt de oorspronkelijke achtergrondkleur terug hersteld (onMouseOut).

Paswoord controle

Maak het volgende formulier. Opgelet een formulier werkt pas correct als alle onderdelen in één form tag staan.

  • We gaan 2 waarden van de invoegvelden vergelijken in een functie
  • We roepen de functie op via het event onkeyup=""