Handleiding HTML - Scripts en gebeurtenissen

HTML		Scripts

Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Gerelateerde elementen: META | NOSCRIPT | SCRIPT

Scripts en gebeurtenissen

De eerder gegeven voorbeelden betreffen scripts welke door de browser uitgevoerd worden, als deze de code tegenkomt in het document. Je kunt echter ook scripts opnemen, welke pas uitgevoerd worden, wanneer zich een bepaalde door de gebruiker veroorzaakte gebeurtenis (event) voordoet. Een voorbeeld van zo'n gebeurtenis is het klikken met de muis op een element: de click gebeurtenis. Andere voorbeelden zijn het schuiven van de muis op een element en er weer vanaf: de gebeurtenissen mouseover en mouseout.

De koppeling van een gebeurtenis aan een element vindt plaats met een event handler: een attribuut, dat de naam draagt van de gebeurtenis, voorafgegaan door "on". De click gebeurtenis bijvoorbeeld kent als event handler onclick.
Een overzicht van de verschillende event handlers is opgenomen in het onderdeel Gebeurtenis-attributen.

De waarde van het gebeurtenis-attribuut betreft script-code, welke verwerkt moet worden als de event handler de bijbehorende gebeurtenis opmerkt.
De activering van een element met een event handler heeft de volgende opbouw:

<Element ongebeurtenis="script-code">

Als script-code wordt soms het complete script opgenomen. Vaak echter gaat het bij de script-code alleen om de naam van een functie, al dan niet voorzien van argumenten, en wordt de functie zelf in een apart script beschreven:

<Element ongebeurtenis="functie_naam(argumenten)">

In het volgende voorbeeld is het onclick attribuut opgenomen voor het A element, met als waarde een compleet JavaScript om een nieuw venster te openen. Als je met de muis op de hyperlink klikt, treedt de click gebeurtenis op en wordt het script uitgevoerd.

<A HREF="script-vb.html" TARGET="voorbeeld" onclick="window.open('script-vb.html', 'voorbeeld', 'width=280,height=240');return false;">Klik op deze hyperlink</A>

Klik op deze hyperlink

Aan een A element wordt nu het onmouseover attribuut toegevoegd, met als waarde niet het complete script, maar een functie met als argument een bericht. Als je de muis op de hyperlink schuift, treedt de mouseover gebeurtenis op en wordt de functie BeweegMuisOp geactiveerd. Deze functie zorgt ervoor dat het bericht in de statusbalk verschijnt.

<A HREF="js/js-begin" onmouseover="BeweegMuisOp('Volg ... voorbeelden');return true;">Beweeg de muis op de link</A>

Beweeg de muis op de link en bekijk het resultaat in de statusbalk.

Het script in de head van dit document waarin de functie BeweegMuisOp is gedefinieerd, heeft de volgende opbouw:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">  </SCRIPT>

Aan een element kun je meerdere gebeurtenissen koppelen. Als voorbeeld is dat gedaan met de hiervoor gebruikte gebeurtenissen click en mouseover:

<A HREF="script-vb.html" TARGET="voorbeeld" onclick="window.open('script-vb.html', 'voorbeeld', 'width=280,height=240');return false;" onmouseover="BeweegMuisOp('Bekijk ... venster');return true;">Klik op deze hyperlink</A>

Klik op deze hyperlink

Aan een gebeurtenis kun je meerdere acties koppelen. In het volgende voorbeeld van de load gebeurtenis, welke optreedt als een document geopend wordt, worden twee functies geactiveerd. De eerste zorgt ervoor dat er een bericht in de statusbalk wordt weergegeven, de tweede dat gelijktijdig een document in een ander frame geopend wordt.

Wanneer je een compleet script als waarde van een gebeurtenis-attribuut opneemt, moet je het META element met de attributen HTTP-EQUIV en CONTENT gebruiken, om aan de browser kenbaar te maken om welke scripttaal het gaat. Je doet dat door bijvoorbeeld de volgende regel in de head van het document te plaatsen:

<META HTTP-EQUIV="content-script-type" CONTENT="text/javascript">

Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin