JavaScript inline event handling
Het indrukken van een toets, het aanklikken van een knop met de muis, het openen of sluiten van een venster, of het verstrijken van een bepaalde hoeveelheid tijd, het zijn allemaal events
. Het is aan de programmeur om op te geven welke code moet worden uitgevoerd als de gebeurtenis optreedt. M.a.w. de programmeur moet een "event handler" specificeren. Dankzij het event-model kunnen we in een taal als C# en Java programma's voor Windows schrijven. Maar ook JavaScript ondersteunt events.
Een inline event-handler heeft als naam de naam van het event heeft voorafgegaan door een prefix 'on': onmouseover, onmouseout, onload, onfocus, onsubmit, ... De manier om events af te handelen die we hier bespreken is de inline-afhandeling. De gebeurtenisafhandeling wordt als een attribuut toegevoegd in de HTML-tag. Dit is overigens de oorspronkelijke manier van gebeurtenisafhandeling in HTML en wordt door alle browsers ondersteund.
Een nadeel aan deze manier van werken is dat de event-handlers in de HTML-tag ingebed zijn en je dus een mengeling hebt van logische programmacode in Javascript en inhoud van je document HTML. Voor grote toepassingen is die manier van werken onoverzichtelijk en moeilijk te onderhouden. Als we het MVC patroon willen toepassen gaan we op een andere manier events leren afhandelen, namelijk extern (Tradioneel event registratie model) en met de addEventListener (De JavaScript HTML DOM EventListener) methode.
Window-events
Het window-object kent enkele events die we in onze programma's nuttig kunnen gebruiken. Zodra een document volledig geladen is, treedt er een load-event op. De event handler voor deze gebeurtenis plaatsen we op in de body-tag van ons HTML-document:
<body onLoad="alert('Hello World!');">
Het is geen goed praktijk uitvoerbare code als een string toe te kennen aan een event. Het is aan te raden een functie te maken en vervolgens deze functie toe te kennen aan het onLoad event.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<meta name="application-name" content="Leren werken met events">
<meta name="description" content="Leren werken met events in JS">
<meta name="keywords" content="DOM, events, JavaScript">
<meta name="author" content="Jef Inghelbrecht">
<title>Jef's boeken</title>
<script>
var hello = function() {
alert('Welkom!');
}
</script>
</head>
<body onload=hello();>
<h1>Events zijn beloftes.</h1>
</body>
Het unload-event treedt op vlak voordat we de pagina verlaten. Ook voor deze gebeurtenis geven we de event handler op in de body-tag:
<body onUnload="alert('Tot ziens!')">
Ook het window-object kent focus- en blur-events; deze worden afgevuurd als de gebruiker van het ene venster naar het andere schakelt. De bijbehorende event handlers worden in de body-tag geplaatst.
DOM-events
De meeste HTML elementen beschikken over events. Het click-event is de meest voor de hand liggende. Deze gebeurtenis vindt plaats als de gebruiker op een element in het document klikt.
Bij een link gaat de gebruiker normaal gezien naar de target van de link, een nieuwe pagina of naar een anker op dezelfde pagina. Maar vanaf vanaf JavaScript 1.1 gebeurt dat niet als de event handler de waarde false retourneert.
<a href="afmelden.html" onClick="return confirm('Ben je zeker dat je de website wilt verlaten?');">Afmelden</A>
Of met een aparte functie:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<meta name="application-name" content="Leren werken met events">
<meta name="description" content="Leren werken met events in JS">
<meta name="keywords" content="DOM, events, JavaScript">
<meta name="author" content="Jef Inghelbrecht">
<title>Jef's boeken</title>
<script>
var verlaten = function() {
return confirm('Ben je zeker dat je de website wilt verlaten?');
}
</script>
</head>
<body>
<h1>Events zijn beloftes.</h1>
<a href="afmelden.html" onClick="return verlaten();">Afmelden</A>
</body>
Twee andere gebeurtenissen zijn populair. Ze hebben te maken hebben met de positie van de muiscursor ten opzichte van het element. Er treedt een mouseover-event op wanneer de muiscursor over het element zweeft, en een mouseout-event wanneer de muiscursor van het element wordt weggehaald.
Het standaard "gedrag" van een mouseover-event van een link is, dat de URL die bij de link hoort, in de statusregel wordt getoond. Dit kunnen we overschrijven door de event handler de waarde true te laten retourneren. Handlers voor link-events geven we op in de anchor-tag, bijvoorbeeld als volgt:
<a href="afmelden.html" onClick="return confirm('Ben je zeker dat je de website wilt verlaten?')">Afmelden</A>
Met confirm, een methode van het window-object, kan de gebruiker zijn keuze bevestigen door op "OK" te drukken of annuleren door op "Cancel" te drukken. In het eerste geval wordt de waarde true geretourneerd en gaat de gebruiker naar pagina afmelden.html, in het tweede geval wordt false teruggegeven en blijft de gebruiker op de huidige pagina.