Über mich

Startseite arrow Tipps & Tricks arrow MooTools - Events (Teil 2)

MooTools - Events (Teil 2)

Donnerstag, 15. Januar 2009
Geschrieben von Armin Vieweg
Im zweiten Artikel über die AJAX-Library geht es um sogenannte Events - Ereignisse die passieren, wenn eine bestimmte Voraussetzung erfüllt sind. z.B. wenn ein Element angeklickt wurde.

Events, oder auch Ereignisse, kennt man von JavaScript her. Die beiden wohl am häufig verwendeten sind onLoad und onClick. Hat man z.B. im HTML-Code der Website folgendes stehen

<body onLoad="funktion();">


wird sobald die Website fertig geladen ist, diese Funktion ausgeführt.



Events nicht in HTML
Das Konzept der AJAX-Bibliotheken ist es diese Events nicht im HTML-Code einzubetten, sondern zentral zu verwalten. Ähnlich wie beim Grundprinzip von CSS kann man so Inhalte, Layout und jetzt auch Funktionen von einander trennen.

So würde das Beispiel von eben in MooTools so aussehen:

<script type="text/javascript">
  $$("body")[0].addEvent('load', funktion);
</script>



Wenn wir dem Body keine ID zugewiesen haben müssen wir ihn mit getElementsByTagName (in Mootools: $$) ausfindig machen. Da es rein theoretisch sein könnte, dass es mehrere Body-Elemente auf unserer Website gibt, wird dadurch ein Array erstellt. Wir wissen, dass es nur einen Body gibt und der wird dann im ersten Wert des Arrays gespeichert, den wir mit [0] angeben.

addEvent ist die Funktion in der wir nun den Auslöser und die Funktion die ausführt werden soll, definieren können. Die Auslöser sind die gleichen wie beim normalem JavaScript, jedoch ohne ein "on" davor. Also statt "onload" heißt es nun "load" und statt "onclick" nur noch "click".

Übrigens, mit folgender Syntax können wir die Funktion selbst auch direkt dort hinterlegen - sie muss nicht gezwungenermaßen ausgelagert werden:

.addEvent('load', function(){
  alert("Website wurde geladen!");
});





Events wieder entfernen
Ist nicht so ohne weiteres machbar, wenn wir sie hart in den HTML-Code geschrieben hätten. Mit MooTools wird das Event ebenso einfach entfernt, wie erstellt. Im oberen Beispiel macht es übrigens keinen Sinn das Event zu entfernen, da es ohne hin nur einmal ausgeführt wird (da die Seite ja nur einmal geladen wird). Daher nun ein Beispiel mit "click":

$$("a").addEvent('click', machdies);

function machdies() {
  alert("Ich mach das!");
  $$("a").removeEvent('click', machdies);
}



In diesem Beispiel wird egal welchen Link man anklickt eine Alert-Box eingeblendet und danach das Event entfernt. Das bedeutet, dass wenn man ein zweites mal auf einen Link drückt diese Funktion nicht ausgeführt wird. Also ganz einfach.


Abfeuern von Events
Auch das kann man mit MooTools recht einfach umsetzen lassen.

Der Befehl fireEvent führt ein vorher zugewiesenes Element aus, auch wenn die Bedingung nicht erfüllt ist. Man greift also auf die verlinkte Funktion zu und führt sie aus. Das schöne hierbei ist, dass eine Zeitangabe mitgegeben werden kann um wie viel Millisekunden (ms) die Ausführung verzögert wird.

Wenn wir bei dem vorherigen Beispiel bleiben (function machdies()) und noch das hier hinzufügen:

$$("body")[0].addEvent('load', function(){
  $$("a").fireEvent('click', $parameter, 10000);
});


wird die Alert-Box mit dem Text "Ich mach das!" 10 Sekunden nach dem die Seite geladen wurde angezeigt, auch wenn man keinen Link gedrückt hat. Nach 10 Sekunden und angezeigter Alert-Box kann man also keinen Link mehr anklicken, da das Event dann ja auch entfernt wurde.

Über den $parameter können individuelle Informationen an die Funktion übergeben werden, die Zahl dahinter gibt an nach wie vielen Millisekunden (1000ms = 1s) das Event ausgeführt werden soll.


Events klonen

Kopiert (oder klont) man ein Element so werden die Events nicht geklont. Man müsste sie jedes mal neu initialisieren. Um dies zu vereinfachen gibt es noch den .cloneEvents-Befehl.

var meinElement = $('meinElement');
var meinKlon = myElement.clone().cloneEvents(meinElement);



Wenn wir ein DIV haben das die id="meinElement" hat, wird es hiermit geklont. Alle Events die wir dem ursprünglichen Event zu geordnet haben werden nicht automatisch mit geklont. Das wird aber hier in dem Fall dank dem Befehl .cloneEvents übernommen. Klicke ich jetzt z.B. auf das neue Element passiert exakt das gleiche, wie auf dem Original.

Diese Funktion geht aber schon etwas weiter. Das Klonen von Elementen zählt zur DOM-Manipulation. Darauf komme ich in einem späteren Artikel zu sprechen.



Teil 1: MooTools - Eine AJAX-Library






  Kommentare (1)
 1 Geschrieben von: Yessay, am 29.11.2009 um 23:30
Jo danke, 
 
die Seite ist außergewöhnlich gut (u.a. dank K2) aufgemacht und die Erklärung in Ordnung. 
 
Leider fehlen noch Beispiele für den praktischen Einsatz. 
 
In manchen Fällen können verschiedene Versionen von Mootools, die Einbindung von JQuery und deren unbedachte Einbindung Probleme bereiten. Dann hilft es nur, die Scripte einzeln durchzuforschen.
Letzte Aktualisierung ( Freitag, 16. Januar 2009 )
 
< Zurück   Weiter >