Terwijl je je browser gebruikt, registreert die allerlei soorten events: de gebruiker klikt op een knop, verstuurt een formulier of gaat met de muis over een element. Zo laat de browser je weten dat de gebruiker net iets heeft gedaan. Je script kan daar vervolgens op reageren. Meestal doet het dat door via het document-object de inhoud van de pagina bij te werken, waardoor die interactiever wordt. In dit hoofdstuk zet ik de soorten events op een rij waarmee je aan de slag kunt om je pagina’s wat levendiger te maken.
Dit artikel is niet volledig en kan nog worden bijgewerkt
Een functie aan een event koppelen
var bouton = document.getElementById('click');
function MonAlert() {
alert('hello world');
}
bouton.onclick = MonAlert;Elke moderne browser begrijpt deze manier om een functie aan een event te koppelen, maar je kunt per event maar één functie hangen en er geen parameters aan meegeven. De haakjes moeten er namelijk af, anders wordt de code meteen uitgevoerd.
Nadeel
Wil je meerdere functies aan hetzelfde event koppelen, dan overschrijft de nieuwe de vorige.
var bouton = document.getElementById('click');
function MonAlert() {
alert('hello world!');
}
function AlertTOTO() {
alert('Toto!')
}
bouton.onclick = MonAlert;
bouton.onclick = AlertTOTO;Het resultaat is de melding Toto!.
Event Listener
Event listeners zijn de modernere aanpak: daarmee koppel je meerdere functies tegelijk aan hetzelfde event.
var bouton = document.getElementById('click');
function MonAlert() {
alert('hello world!');
}
function AlertTOTO() {
alert('Toto!');
}
bouton.addEventListener('click', MonAlert);
bouton.addEventListener('click', AlertTOTO);De methode addEventlistener() neemt drie parameters:
element.addEventlistener('evenement', NomDeFonction, Boolean);
- evenement: de naam van het event waarnaar je wilt luisteren ( blur, click, … );
- De code die je wilt uitvoeren: een functie die je zelf hebt gedeclareerd of een anonieme functie.
- Een
booleandie aangeeft hoe het event zich voortplant, standaard staat die waarde op false.
Nadeel
Deze methode wordt niet ondersteund door oude browsers.
Parameters gebruiken
We zagen al dat er geen haakjes achter de functie mogen staan als je die aan een event koppelt. Wil je toch parameters meegeven, dan koppel je een anonieme functie aan het event en roep je daarbinnen je eigen functie met haar parameters aan.
function MonAlert(message) {
alert(message);
}
bouton.addEventListener('click', function() {
MonAlert('Mon message qui s'affiche!');
});Het Event-object
Zodra er een event optreedt, bestaat er een event-object met informatie over dat event en over het element waarop het plaatsvond.
var bouton = document.getElementById('click');
function MonAlert(e) {
console.log(e.target);
}
bouton.onclick = MonAlert;Met een event listener en parameters
var bouton = document.getElementById('click');
function MonAlert(e, message) {
console.log(e.target);
console.log(message);
}
bouton.addEventListener('click', function(e){
MonAlert(e, "hello world!");
});Eigenschappen
| Eigenschap | Beschrijving |
|---|---|
target | Het element dat het event heeft afgevuurd |
type | Het event dat is afgevuurd |
Methodes
| Methode | Beschrijving |
|---|---|
preventDefault() | Annuleert het standaardgedrag van een event (als dat te annuleren is) |
stopPropagation() | Stopt de propagatie van het event. |
Lijst met events
Hier volgt een korte, niet-uitputtende lijst met events die je geregeld tegenkomt.
Browser
| Event | Beschrijving |
|---|---|
load | Gaat af zodra de browser klaar is met laden. Het kan ook afgaan op andere geladen elementen, zoals afbeeldingen, scripts of objecten. |
unload | het omgekeerde van het event load: het gaat af wanneer je van pagina wisselt. |
resize | gaat af wanneer de gebruiker het formaat van zijn browservenster verandert. |
scroll | gaat af wanneer de gebruiker de pagina of een element scrollt. |
error | error gaat af wanneer de browser een JavaScript-fout tegenkomt. |
Muis
| Event | Beschrijving |
|---|---|
click | Gaat af wanneer de gebruiker op een element klikt |
dblclick | Hetzelfde als click, maar dan wanneer de gebruiker snel dubbelklikt. |
mouseup | Gaat af wanneer de gebruiker een muisknop ingedrukt houdt. |
mousedown | Gaat af wanneer de gebruiker een muisknop loslaat. |
mousemove | Gaat af wanneer de cursor beweegt. |
mouseover | gaat af wanneer de cursor over een element beweegt. |
mouseout | gaat af wanneer de cursor een element verlaat waarover hij zweefde, of een kindelement daarvan. |
Toetsenbord
| Event | Beschrijving |
|---|---|
input | Gaat af wanneer de waarde van een <input>– of <textarea>-element verandert. |
keydown | Gaat af wanneer de gebruiker een toets indrukt. Houdt de gebruiker die toets ingedrukt, dan blijft het event zich herhalen. |
keypress | Gaat af wanneer de gebruiker een toets indrukt die een teken op het scherm zou zetten. Bij de pijltjestoetsen gaat dit event dus niet af, terwijl keydown dat wel doet. Houdt de gebruiker de toets ingedrukt, dan blijft het event zich herhalen, net als bij keydown. |
keyup | Gaat af wanneer de gebruiker een toets loslaat. De events keydown en keypress gaan af voordat er een teken op het scherm verschijnt, terwijl keyup pas daarna afgaat. |
Weten welke toets is ingedrukt
Met het Event-object weet je welke toets is ingedrukt: e.keycode geeft de ASCII-code van de toets terug.
Formulier
| Event | Beschrijving |
|---|---|
submit | Gaat af wanneer de gebruiker op de verzendknop van het formulier klikt. |
change | Gaat af wanneer de status van bepaalde formulierelementen verandert. ( radio, checkbox en select ) |
