HTML-event

Een HTML-event definieert een bepaalde reactie op een actie van de gebruiker of een gebeurtenis in de webbrowser. Het woord event komt uit het Engels en betekent gebeurtenis. HTML-events zorgen er onder meer voor dat webpagina's kunnen reageren op muisbewegingen of toetsaanslagen van de gebruiker, bijvoorbeeld in de toepassing van Dynamic HTML en AJAX.

Net als voor andere zaken met betrekking tot webpagina's heeft de W3C ook een standaard vastgesteld voor HTML-events. In deze specificatie zijn vastgelegd welke events aan welke HTML-elementen kunnen worden gekoppeld, en hoe deze koppeling kan worden gemaakt. De respons op een event is het aanroepen een HTML-script. Net als bij andere standaarden die door het W3C worden opgesteld, heeft ook in dit geval elke browser zijn eigen implementatie van de events, die soms aanzienlijk van elkaar kunnen verschillen.

<img src="voorbeeld.png" onclick="alert('hallo');"/>

In het hiernaast geplaatste kader staat een voorbeeld hoe in HTML-code een event (in dit geval het klikken met de muis) is gekoppeld aan een plaatje in een webpagina. Naast het klikken van de muis zijn er een groot aantal andere events gedefinieerd, onder meer "mouseover" voor "de muis wordt verplaatst naar het element", "mouseout" voor "de muis wordt uit het element verplaatst", "keypress" voor "er wordt een toets ingedrukt", enzovoorts.

HTML-events worden veel toegepast voor het verduidelijken van navigatie in websites: de onderliggende keuzes van een hoofdonderwerp worden bijvoorbeeld pas zichtbaar op het moment dat de gebruiker de muis in het vakje van het hoofdonderwerp brengt (en verdwijnen weer zodra de gebruiker de muis er weer weg haalt).

Een andere veelgebruikte toepassing is het controleren van een ingevuld HTML-formulier op het moment van opsturen. De browser wordt geïnstrueerd om de gebeurtenis "formulier versturen" op te vangen, en voordat de opdracht wordt uitgevoerd, een controle uit te voeren op de ingevulde velden. Als er niet wordt voldaan aan de gestelde voorwaarden (er is bijvoorbeeld geen e-mailadres ingevuld terwijl dat wel verplicht was gesteld), kan de browser alsnog het opsturen van het formulier voorkomen en in plaats daarvan de gebruiker een melding geven van de tekortkoming.

Naast events die ontstaan door een actie van de gebruiker, zijn er ook events die door de browser zelf ontstaan. Een voorbeeld daarvan is "load": het geladen zijn van een document. Als een document wordt geopend in de browser, duurt het enige tijd voordat het complete document is binnengehaald. Het moment waarop de browser klaar is met laden, kan ook worden opgevangen.

Het verschil tussen een event die door de gebruiker ontstaat en een event die door de browser ontstaat is niet altijd even duidelijk. Events van de browser ontstaan altijd indirect als gevolg van een actie van de gebruiker.

Events kunnen niet alleen in de HTML-code worden aangegeven, maar ook dynamisch, met behulp van een script aan een element worden gekoppeld. Dat proces heet "attachEvent" of "addEventListener" (afhankelijk van de browser). Ook het omgekeerde is mogelijk: de gevoeligheid van een element voor een event juist verwijderen ("detachEvent" of "removeEventListener").

Deze mogelijkheden zijn belangrijk voor bijvoorbeeld de mogelijkheid om gedeelten van een document te verslepen. Dat gebeurt namelijk op basis van een aantal opeenvolgende events:

1. muisknop indrukken
2. muis verplaatsen
3. muisknop loslaten

Het verslepen zou alleen moeten plaatsvinden in reactie op het bewegen van de muis nadat de muisknop ingedrukt is, maar voordat de muisknop weer losgelaten is. Het bewegen van de muis buiten die context zou geen reactie moeten opleveren. Om dat op te lossen wordt er op het moment van het indrukken van de muisknop een gevoeligheid voor het bewegen van de muis toegevoegd, en deze wordt weer verwijderd op het moment dat de muisknop wordt losgelaten.

Het begrip bubbling heeft te maken met het doorgeven van een event in een bepaald HTML-element naar een (hiërarchisch) bovengelegen element. De HTML-elementen kunnen namelijk genest zijn: een element ligt in zijn geheel in een ander element. Bijvoorbeeld een plaatje dat in een tabel staat. In principe geldt dan dat een muisklik op het plaatje ook geldt als een muisklik op de tabel. Met bubbling wordt bedoeld dat een opgevangen event wordt doorgegeven aan een hoger gelegen element, in dit geval van het plaatje naar de tabel. Het is mogelijk dat doorgeven ongewenst is en in dat geval kan de bubbling worden gestopt.

Bubbling speelt niet bij alle events een rol. Sommige events worden nooit aan bovengelegen elementen doorgegeven.

• Event
• Lijst van HTML-events
• Document Object Model
• HTML-scripting

• HTML 4.01-specificatie ten aanzien van scripts en events in het bijzonder