Javascript Events
Ikzelf maak maar al te graag gebruik van events. Dit is een soort alternatief voor de onmouseover en onclick attributen in je tags.
De functie die ik maar al te graag gebruik, ook weer puur om van de ongelijkheden in verschillende browsers af te komen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
function addEvent(obj, eventType,fn, useCapture)
{
if (obj.addEventListener) {
obj.addEventListener(eventType, fn, useCapture);
return true;
} else {
if (obj.attachEvent) {
var r = obj.attachEvent("on"+eventType, fn);
return r;
}
}
}
{
if (obj.addEventListener) {
obj.addEventListener(eventType, fn, useCapture);
return true;
} else {
if (obj.attachEvent) {
var r = obj.attachEvent("on"+eventType, fn);
return r;
}
}
}
Een voorbeeld van gebruik van deze functie:
Stel, we hebben een plaatje met als id ‘afbeelding’ (<img src="" id="afbeelding" alt=""/>). Deze kunnen we vanuit Javascript oproepen via document.getElementById('afbeelding') en dan aan een variabele toewijzen.
[red]Pas op: Je kan pas een element uit de pagina selecteren nadat de pagina helemaal geladen is. Gebruik hiervoor het onload-event. Zelf vind ik dit de meest handige aanpak.[/red]
Nu moeten we dus een even hangen aan dit object. Zie het totaalvoorbeeld, aangezien dat naar mijn mening veel makkelijker uitlegt dan al die code tussen tekst:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
function init()
{
var afbeeldingObject = document.getElementById('afbeelding');
addEvent(afbeeldingObject, 'click', laatLezerSchrikken);
}
function laatLezerSchrikken()
{
alert('Boeh!');
}
addEvent(window, 'load', init);
{
var afbeeldingObject = document.getElementById('afbeelding');
addEvent(afbeeldingObject, 'click', laatLezerSchrikken);
}
function laatLezerSchrikken()
{
alert('Boeh!');
}
addEvent(window, 'load', init);
« vorige pagina | volgende pagina »
Inhoudsopgave
- Introductie/verklaring van het buzz-word
- Javascript Events
- Javascript Events (overbodige extra's)
- Het XMLHTTPRequest object - het object aanmaken
- Het XMLHTTPRequest object - het object zijn parame
- Het XMLHTTPRequest object - de cliff-hanger verkla
- De afhandeling van de vraag
- De 4 manieren van het schrijven van data
- Manier 1: Gewone HTML
- Manier 2: Platte tekst
- Manier 3: Als XML
- Manier 4: JSON