De Tutorial
--inleiding
In deze tutorial ga je leren om eigen events te maken over eigen javascript objecten. Voor deze tutorial moet je dus al enige javascript ervaring hebben.
Indien je nog geen mootools framework gebruikt kan je overwegen mootools te downloaden en te gebruiken. Met de mootools core-builder heb je een script van 15kB om alleen gebruik te maken van de events. Beetje omslachtig dus als je geen mootools gebruikt.
Als je dus geen mootools gebruikt, kan je overwegen deze standaard te gebruiken of deze tutorial gewoon niet te lezen.
--events
Events... wat zijn het eigenlijk?
Events, of "gebeurtenissen", zijn in dit geval acties die uitgevoert moeten worden bij bepaalde gebeurtenissen. Als een gebruiker bijv. op een object klikt wordt de "onclick" event gestart.
In HTML/javascript zelf heb je al de mogelijkheid voor onclick events etc., maar dan alleen op HTML objecten én je kan maar 1 event-handler (1 actie) toevoegen per actie.
Dynamisch events toevoegen/verwijderen zit er niet bij.
Bij het gebruiken van de mootools events class zitten er echter allerlei leuke functies ingebouwd voor het dynamisch toevoegen en verwijderen van gebeurtenissen.
Zie:
http://mootools.net/docs/core/Element/Element.Event
In deze tutorial gaan we echter nog ietsje verder:
we gaan de events-class gebruiken op eigen objecten, zodat we de mootools events class kunnen gebruiken bij... eigen objecten.
-De Events-classe toevoegen aan een object
De events-classe toevoegen aan een object is eigenlijk supersimpel met behulp van de mootools "$extend" functie.
2
3
4
5
6
7
8
9
var woning = function() {
$extend(this,new Events);
};
?>
Dit is de HELE code die nodig is om de mootools event-handler toe te voegen aan een eigen object. In dit geval heet ons eigen object "woning".
Alleen omdat het hier om een eigen object gaat en niet om een HTML element heb je dus andere events.
Je kan niet klikken op een woning... een deur openen kan echter wel!
we voegen dus een functie toe aan onze object class.
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var woning = function() {
//voeg Events class in
$extend(this,new Events);
//maak een referentie-variable aan naar de woning classe die vanuit iedere functie bereikbaar is
var root = this;
//een lokale variable met daarin de status van de deur.
this.deur_geopend = false;
//2 lokale functies
this.open_deur = function() {
if(root.deur_geopend === false) {
//open de deur indien deze gesloten is
root.deur_geopend = true;
}
}
this.sluit_deur = function() {
if(root.deur_geopend === true) {
//sluit de deur indien deze open is.
root.deur_geopend = false;
}
}
};
?>
Nu hebben we een code waarmee we de deur van een huis kunnen openen en sluiten. Echter, soms, als je met veel OOP bezig bent wil je wel eens dat er wat gebeurt als iemand de deur open doet.
In dit geval kan je dus event-triggers toevoegen, bijv. "onDoorOpen" en "onDoorClose".
Als je eenmaal de triggers (gebeurtenis) hebt toegevoegd kan je event-handlers (actie(s)) toevoegen.
Hier een voorbeeld met de triggers toegevoegd:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var woning = function() {
//voeg Events class in
$extend(this,new Events);
//maak een referentie-variable aan naar de woning classe die vanuit iedere functie bereikbaar is
var root = this;
//een lokale variable met daarin de status van de deur.
this.deur_geopend = false;
//2 lokale functies
this.open_deur = function() {
//trigger de acties die nodig zijn wanneer er een deur geopend wordt.
root.fireEvent('onDoorOpen');
if(root.deur_geopend === false) {
//open de deur indien deze gesloten is
root.deur_geopend = true;
//trigger de acties die nodig zijn wanneer de deur succesvol geopend IS.
root.fireEvent('onDoorOpened');
}
}
this.sluit_deur = function() {
//trigger de acties die nodig zijn wanneer er een deur gesloten wordt.
root.fireEvent('onDoorClose');
if(root.deur_geopend === true) {
//sluit de deur indien deze open is.
root.deur_geopend = false;
//trigger de acties die nodig zijn wanneer de deur succesvol gesloten IS.
root.fireEvent('onDoorClosed');
}
}
};
?>
zoals je ziet kan je zelf gewoon gebeurtenissen toevoegen onder iedere naam, zoveel jij maar wilt.
Nou kan je ook oneindig veel gebeurtenissen toevoegen en weer verwijderen.
Zie bijv. de volgende code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
var woning = function() {
//voeg Events class in
$extend(this,new Events);
//maak een referentie-variable aan naar de woning classe die vanuit iedere functie bereikbaar is
var root = this;
//een lokale variable met daarin de status van de deur.
this.deur_geopend = false;
//2 lokale functies
this.open_deur = function() {
//trigger de acties die nodig zijn wanneer er een deur geopend wordt.
root.fireEvent('onDoorOpen');
if(root.deur_geopend === false) {
//open de deur indien deze gesloten is
root.deur_geopend = true;
//trigger de acties die nodig zijn wanneer de deur succesvol geopend IS.
root.fireEvent('onDoorOpened');
}
}
this.sluit_deur = function() {
//trigger de acties die nodig zijn wanneer er een deur gesloten wordt.
root.fireEvent('onDoorClose');
if(root.deur_geopend === true) {
//sluit de deur indien deze open is.
root.deur_geopend = false;
//trigger de acties die nodig zijn wanneer de deur succesvol gesloten IS.
root.fireEvent('onDoorClosed');
}
}
};
var een_woning = new woning();
een_woning.addEvent('onDoorOpened' , function() {
alert('die deur is geopend: ' + (een_woning.deur_geopend?'true':'false'));
});
een_woning.open_deur();
//op dit moment krijgen we de volgende melding: "die deur is geopend: true".
?>
Zoals je ziet is het niet echt zo moeilijk. Eigenlijk is het heel simpel, als je maar een beetje logisch nadenkt.
Voor meer details over de mootools event-handler functies, zie de volgende documentatie:
http://mootools.net/docs/core/Element/Element.Event
De volgende functies zijn aanwezig nadat je de classe hebt toegevoegd aan je object:
-addEvent
-removeEvent
-addEvents
-removeEvents
-fireEvent
-cloneEvents
Lees de documentatie om de werking ervan te zien.
Veel succes en veel plezier met javascript OOP.