Programmeren in JavaScript/Events

Wat zijn events?

Events zijn gebeurtenissen, die betrekking hebben op de webpagina waarin het javascript voorkomt. Ze zijn belangrijk omdat een javascript op deze gebeurtenissen kan reageren.

Voorbeelden van dit soort gebeurtenissen:

• De bezoeker van de pagina drukt op een toets
• het laden van de pagina is voltooid
• Het browservenster wordt vergroot of verkleind
• Er wordt op een knop of menu geklikt

Een javascript kan op een gebeurtenis reageren als er een verbinding gemaakt is tussen de gebeurtenis die kan optreden en een stukje javascript. Deze verbinding kan worden gelegd in de HTML-code van de pagina maar ook in het script zelf.

Klikken op een HTML-element

Voorbeeld: Op de pagina staat een knop. Als op deze knop geklikt wordt, moet een boodschap getoond worden.

Verbinden in HTML

In HTML kan de verbinding als volgt gelegd worden:

HTML-code: Verbinding tussen het klikken op een knop en javascript

<button id="button1"  type="button" onclick="onbutton1clicked()">
   klik hier
</button>

Het attribuut "onclick" van het HTML-element "button" krijgt als waarde een of meerdere javascript statements. Dit mag van alles zijn, maar het meest overzichtelijke is om hier een functieaanroep te plaatsen. In het javascript moet dan een functie "onbutton1clicked" gedefinieerd zijn, deze functie handelt de gebeurtenis af en noemen we daarom in het Engels de "event handler".

Javascript-code: Event handler

function onbutton1clicked()
{
   alert("Er is geklikt op button1");
}

Meer HTML attributen ten behoeve van gebeurtenissen zijn te vinden in de appendix "event attributen".

Verbinden in javascript

De verbinding tussen de gebeurtenis en de event handler kan ook in het script zelf worden aangelegd, op een plaats in het javascript die wordt uitgevoerd als de pagina geheel geladen is:

Javascript-code: Verbinding maken tussen gebeurtenis en event handler

    ...
    var button1 = document.getElementById("button1");
    button1.onclick = onbutton1clicked;
    ...
}

Events van het toetsenbord

Er zijn twee events die optreden als de bezoeken van een pagina op een toets drukt:

Event Keydown

Dit event treedt op na het indrukken van een toets. Het event treedt op bij alle toetsen. De variabele event.keyCode bevat (meestal) een aanduiding van de toets. Het woordje (meestal) hierboven geeft aan dat je (afhankelijk van de gebruikte browser) soms iets anders ziet. Een mooie manier om hier geen last van te hebben is het gebruik van JQuery (zie later).

Javascript-code: Verbinding maken tussen het indrukken van een toets en een event-handler

document.onkeydown = keydown;

En dan de event-handler:

Javascript-code: Event handler voor Keydown

function keydown(event)
{
    writeln(event.keyCode);
}

Event KeyPress

Dit event treedt op na het indrukken van een toets. Het event treedt alleen op bij toetsen die een ASCII character genereren. De variabele event.charCode bevat (meestal) de gegenereerde ASCII code. Het woordje (meestal) hierboven geeft aan dat je (afhankelijk van de gebruikte browser) soms iets anders ziet. Een mooie manier om hier geen last van te hebben is het gebruik van JQuery (zie later).

Javascript-code: Verbinding maken tussen het drukken op een toets en een event-handler

document.onkeypress = keypress;

En dan de event-handler:

Javascript-code: Event handler voor Keypress

function keypress(event)
{
    writeln(event.charCode);
}

Een combinatie van deze scripts voor uitvoering op de testpagina kunt u vinden in appendix B.