7. EventsJe wil vaak dat er iets gebeurt op het moment dat de gebruiker ergens op klikt, op een toets drukt of iets anders doet. Events maken dit mogelijk. Naar boven7.1. Wat is een event?Een event is letterlijk een gebeurtenis. Als een event wordt getriggerd (in werking gesteld), voert die de toegekende code uit. In andere woorden: je kan dus bepaalde code laten uitvoeren bij een bepaald event (gebeurtenis). Naar boven7.2. Events maken en gebruikenEen event gebeurt altijd bij een bepaald element. Als er bijvoorbeeld op een knop geklikt wordt, zal die knop een onclick event triggeren. Welke events er allemaal zijn komt in H7.3, nu houden we het even bij het onclick event van een knop. Je kan in de HTML-code events toekennen aan elementen. Dan zijn ze gewoon een attribuut: Maar het is beter om de JavaScript en HTML geheel gescheiden te houden. Dus zullen we de events via JavaScript moeten toekennen. Daarvoor moet er eerst een functie gemaakt worden die uitgevoerd moet worden bij dat event. Vervolgens kan die functie aan het event worden toegekend. JavaScript:// Functie voor het even maken function functieBijEvent() { alert("Je klikte!"); } // Functie aan het event toekennen document.getElementById("knop").onclick = functieBijEvent; // Let op, nu geen () gebruiken
HTML:
Merk op dat er bij het toekennen aan het event geen ( ) gebruikt wordt. Je roept de functie immers niet aan, maar je ken hem toe. Er wordt hier ook gelijk een nieuwe functie geïntroduceerd: document.getElementById(). Waarom hier document. voor de functie staat komt in H9.4 aan bod, zie het voor nu maar als deel van de naam van de functie. Deze functie geeft een variabele terug die verwijst naar het HTML-element met het opgegeven id. Dat HTML-element moet dus wel bestaan. Via de verwijzing naar dat HTML-element kunnen dus de events (en meer, maar dat komt in H10.4 aan bod) ervan aangepast worden Alleen gaat dit niet helemaal goed als de JavaScript voor het HTML-element komt in de pagina. Want dan wordt eerst de JavaScript uitgevoerd en dan pas het HTML-element aangemaakt. Wat betekent dat het HTML element met het id knop nog niet bestaat zodra de JavaScript wordt uitgevoerd en dus kan er geen event aan toegekend worden. Om dit op te lossen kan een ander event gebruikt worden dat wel vanaf het begin bestaat: window.onload. Dit event wordt getriggerd op het moment dat de pagina geladen is, en omdat je hier geen HTML element aanspreekt heb je niet het probleem dat het element mogelijk nog niet bestaat. We maken dus een functie die alle andere events toekent, en we kennen die functie toe aan het window.onload-event. JavaScript:function functieBijEvent() { alert("Je klikte!"); } function maakEvents() { // Events voor de HTML-elementen aanmaken: document.getElementById("knop").onclick = functieBijEvent; } window.onload = maakEvents; // Functie maakEvents() wordt aangeroepen als window.onload getriggerd wordt // In die functie worden de rest van de events toegekend aan hun HTML-elementen // Omdat window.onload pas getriggerd wordt als alles geladen is bestaan alle HTML-elementen al
HTML:
Naar boven7.3. Welke events zijn er?Er zijn heel veel events, de volgende events gelden voor elk HTML-element: Event | Wordt getriggerd als... | onblur | ... een element de focus verliest | onclick | ... er op het element geklikt wordt | ondblclick | ... er op het element gedubbelklikt wordt | onfocus | ... het element de focus krijgt | onkeydown | ... er een toets wordt ingedrukt | onkeypress | ... er een toets wordt ingedrukt of ingedrukt is | onkeyup | ... er een toets los gelaten wordt | onmousedown | ... een muisknop ingedrukt wordt | onmousemove | ... de muis beweegt | onmouseout | ... de muis uit het element weg beweegt | onmouseover | ... de muis over het element heen beweegt | onmouseup | ... de muisknop losgelaten wordt | onresize | ... een scherm of frame van grootte verandert |
De volgende events worden maar door enkele elementen ondersteund: Event | Wordt getriggerd als... | Elementen | onchange | ... de inhoud van een invoerveld verandert | <input type="text"> <textarea> <select> | onerror | ... er een fout optreedt tijdens het laden van een document of plaatje | <img> <object> <style> | onload | ... een pagina of plaatje geladen is | <img> <body> | onselect | ... de inhoud van een invoerveld geselecteerd wordt | <input type="text"> <textarea> | onunload | ... de gebruiker de pagina verlaat | <body> <frameset> |
Naar boven7.4. Variabele thisVaak wil je dat er juist met het element dat het event getriggerd heeft iets gebeurt. Bijvoorbeeld een plaatje die een blauwe rand krijgt als hij aangeklikt is. Of een tekstvakje waarvan de tekst wordt geselecteerd zodra je erop klikt. Dan kun je wel met allemaal id's gaan werken en het juiste element telkens proberen te vinden met dat id. Maar JavaScript heeft iets veel makkelijkers: een variabele die naar het element dat de event getriggerd heeft wijst. Die variabele heet this. Wat je allemaal precies kan aanpassen aan zo'n element komt in H10.5. Maar voor nu hoef je alleen te weten dat element.innerHTML de HTML die in dat element zit bevat. Als je die dus aanpast zal ook de inhoud van dat element aangepast worden. De variabele this is alleen bekend in zijn event. Maar dat is op zich geen probleem, want dat is ook de enige plek waar je hem meestal wil gebruiken. De variabele this verwijst dus naar het element vanuit waar het event getriggerd is, dus kun je met this bijvoorbeeld de inhoud van dat element aanpassen. JavaScript:function vertaal() { // Binnen in deze functie is 'this' dus bekend, als deze functie tenminste door het triggeren van een event wordt aangeroepen // Als je zelf ergens 'vertaal();' neerzet dan zal 'this' niet bekend zijn, wat in dit geval dus tot een fout zou leiden (gezien 'this' gebruikt wordt) this.innerHTML = "Hallo wereld!"; // Pas de inhoud van het HMTL-element dat dit event getriggerd heeft aan } function maakEvents() { document.getElementById("translate_me").onclick = vertaal; } window.onload = maakEvents;
HTML:<div id="translate_me">Hello world! <br />(click to translate to Dutch) </div>
Je kan meerdere events aan dezelfde functie koppelen. Omdat this telkens naar een andere element verwijst (namelijk naar degene die het event getriggerd heeft) hoeven we de functie niet eens te herschrijven. JavaScript:function vertaal() { this.innerHTML = "Hallo wereld!"; // Pas de inhoud van het HMTL-element dat dit event getriggerd heeft aan } function maakEvents() { // Alle HTML-elementen hebben een event met dezelfde functie // Maar toch zal die functie alleen het element waarop geklikt wordt 'vertalen' document.getElementById("translate_me1").onclick = vertaal; document.getElementById("translate_me2").onclick = vertaal; document.getElementById("translate_me3").onclick = vertaal; document.getElementById("translate_me4").onclick = vertaal; document.getElementById("translate_me5").onclick = vertaal; } window.onload = maakEvents;
HTML:<div id="translate_me1">Hello world! <br />(click to translate to Dutch) </div> <div id="translate_me2">Hello world! <br />(click to translate to Dutch) </div> <div id="translate_me3">Hello world! <br />(click to translate to Dutch) </div> <div id="translate_me4">Hello world! <br />(click to translate to Dutch) </div> <div id="translate_me5">Hello world! <br />(click to translate to Dutch) </div>
Merk op dat de naam this een gereserveerde naam is, en dat je dus niet zelf ergens een variabele of functie met die naam aan mag maken (zoals beschreven in H4.2). Naar boven7.5. Variabele window.eventSoms wil je ook informatie over het event hebben. Bij een onkeypress-event wil je bijvoorbeeld vaak weten welke toets er ingedrukt is. Hiervoor is de variabele window.event bedacht. In sommige browsers (bijvoorbeeld Firefox) bestaat window.event niet, maar wordt de variabele als argument aan het event mee gegeven. Ook daar kunnen we een oplossing voor bedenken: JavaScript:function functieDieEventGebruikt(event) { if(window.event) // Als window.event niet bestaat is zijn waar null, ofwel: 0, ofwel: false event = window.event; // Dus als hij wel bestaat is het bovenstaande if-statement true // Code waarin je event gebruikt } function maakEvents() { document.getElementById("knop").onclick = functieDieEventGebruikt; } window.onload = maakEvents;
HTML:
Via de variabele event kan allerlei informatie over het event worden opgevraagd. Hieronder kun je in een tabel zien welke informatie opgevraagd kan worden. Attribuut | Omschrijving | altKey | Is true als de alt-toets was ingedrukt toen het event getriggerd werd | ctrlKey | Is true als de control-toets was ingedrukt toen het event getriggerd werd | shiftKey | Is true als de shift-toets was ingedrukt toen het event getriggerd werd | keyCode | Waarde van de toets die ingedrukt werd | clientX | Geeft de x-coördinaat van waar de muis was toen het event getriggerd werd, waarbij 0 de linkerrand van het element waarin geklikt werd is | clientY | Geeft de y-coördinaat van waar de muis was toen het event getriggerd werd, waarbij 0 de bovenrand van het element waarin geklikt werd is | screenX | Geeft de x-coördinaat van waar de muis was toen het event getriggerd werd, waarbij 0 de linkerrand van het scherm is | screenY | Geeft de y-coördinaat van waar de muis was toen het event getriggerd werd, waarbij 0 de bovenrand van het scherm is | button | Geeft aan welke muisknop ingedrukt was toen het event getriggerd werd |
Bij die laatste, button, geldt het volgende (merk op dat Internet Explorer andere waardes hanteert): Waarde | Waarde in Internet Explorer | Muisknop | 0 | 1 | Linker muisknop | 1 | 4 | Middelste muisknop | 2 | 2 | Rechter muisknop |
Hoe kun je nou de waarde van zo'n attribuut opvragen via de variabele event? Simpel, met: event.attribuut, waarbij attribuut natuurlijk vervangen moet worden door de naam van het attribuut. JavaScript:function showCoords(event) { if(window.event) event = window.event; alert("De coordinaten van je muis op het scherm zijn: (" + event.screenX + ", " + event.screenY + ")"); } function maakEvents() { document.getElementById("divje").onclick = showCoords; } window.onload = maakEvents;
HTML:<div id="divje">Klik hier om de co ördinaten van je muis weer te geven </div>
Merk op dat de genoemde attributen niet altijd een waarde hebben. Zo heeft keyCode alleen een waarde als het een onkeypress, onkeydown of onkeyup event was. Want het geeft de toets aan die bij dat event ingedrukt was. Zo hebben button, clientX, clientY, screenX en screenY ook alleen een waarde bij onclick, onmouseup en onmousedown. De attributen hebben dus alleen een waarde als dat zinnig is. Naar boven7.6. Opdrachten- Maak een knop, als op die knop geklikt wordt komt er een berichtje met de tekst Hello world! (H7.2)
Antwoord - Bedenk waarom sommige events maar door enkele HTML-elementen ondersteund worden. (H7.3)
Antwoord - Maak een div-element met de tekst: Hello world!
Zodra je met je muis over deze div heen gaat moet de tekst schuin gedrukt worden. Zodra je met je muis weer van deze div af gaat moet de tekst weer normaal worden.
Als je op de div klikt moet de tekst in het Nederlands vertaald worden ("Hallo wereld!" dus). Als er dan weer opnieuw op geklikt wordt verandert de tekst weer in Engels. Dus bij elke klik verandert de taal.
Hoe vaak de tekst ook vertaald wordt, hij moet altijd schuin gedrukt worden als de muis er overheen gaat, en weer normaal als de muis van de div af gaat.
Tip: geef de div met CSS (gewoon via het style-attribuut) een achtergrond zodat je kan zien wanneer je met je muis er boven hangt en wanneer niet.
Alleen voor het toekennen van de events mag de functie document.getElementById() gebruikt worden, verder niet. (H7.4) Antwoord - Maak 5 divs met dezelfde tekst waarvan je door te klikken de opmaak als volgt kan veranderen:
als je gewoon op een div klikt, wordt deze vetgedrukt.
Door op een vetgedrukte div te klikken, terwijl je shift ingedrukt houdt moet deze weer gewoon worden.
De tekst in de div maakt niet uit (tip: geef de divs een achtergrondkleur, zo kun je zien wanneer je er op klikt of niet).
Let op: alleen de opmaak van de div waarop geklikt wordt mag veranderen, ze veranderen dus los van elkaar. De functie document.getElementById() mag alleen bij het toekennen van de events gebruikt worden. (H7.5) Antwoord - Het is lastig om uit het hoofd te leren welke toetscode bij elke toets hoort.
Toch heb je deze toetscode nog wel eens nodig bij event.keyCode.
Maak een pagina waarbij als je op een toets drukt, de code van die toets op de pagina weergegeven wordt. Popup-boxjes (zoals alert()) en document.write() zijn verboden. (H7.5)
Antwoord - Maak een pagina waarop constant de coördinaten van je muis worden weergegeven. Gebruik van document.write() is verboden. (H7.5)
Antwoord
|