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=300,height=200'); return false;">Klik op deze hyperlink</A>

Klik op deze hyperlink

Wanneer de gebeurtenis zich meerdere keren voordoet, kun je ervoor kiezen niet het complete script in de hyperlink op te nemen maar het apart in het document te definiëren. In de hyperlink neem je dan alleen het argument op dat verschilt, bijvoorbeeld de locatie van het document dat in het nieuwe venster geopend moet worden.

In een script in de head van dit document is de functie onclickvbVenster gedefinieerd met de volgende opbouw:

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

De link met de URL als argument, ziet er als volgt uit:

<A HREF="script-vb.html" TARGET="voorbeeld" onclick="onclickvbVenster('script-vb.html'); return false;">hyperlink</A>

Klik op deze hyperlink om een nieuw venster te openen.

Zie voor meer voorbeelden van gebeurtenissen ook de JavaScript voorbeelden voor Nieuw venster openen.

Aan een element kun je meerdere gebeurtenissen koppelen, bijvoorbeeld aan het A element de gebeurtenissen click en mouseover. Als je op de hyperlink klikt treedt de ene gebeurtenis op en als je de muisaanwijzer boven de hyperlink schuift de andere.

<A HREF="script-vb.html" TARGET="voorbeeld" onclick="functie1(argumenten1);" onmouseover="functie2(argumenten2);">...</A>

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.:

<BODY onload="functie1(argumenten1);functie2(argumenten2);"> </BODY>

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