Jedes JavaScript-Framework implementiert die browserübergreifende Ereignisbehandlung und ermutigt Sie, sich vom altmodischen Inline-Anhängen von Ereignissen zu lösen und einen optimierten linearen Ansatz zu verwenden. Schauen Sie sich das jQuery-Beispiel in Listing 6 an, das das Hover-Ereignis verwendet, um ein div-Element hervorzuheben.
Listing 6: Anhängen des Hover-Ereignisses mit jQuery
$('#the-box').hover(function() {
$(this).addClass('highlight');
}, function() {
$(this).removeClass('highlight');
});
Dies ist ein besonderes Ereignis von jQuery, und Sie werden feststellen, dass es zwei Funktionen bietet. Die erste Funktion wird aufgerufen, wenn das Ereignis onMouseOver ausgelöst wird, und die zweite Funktion wird aufgerufen, wenn das Ereignis onMouseOut ausgelöst wird. Dies liegt daran, dass es kein Standard-DOM-Ereignis für Hover gibt. Schauen wir uns ein typischeres Ereignis wie einen Klick an (siehe Listing 7):
Listing 7: Anhängen von Klickereignissen mit jQuery
$('#the-button').click(function() {
alarm('Du hast den Knopf gedrückt!');
});
Wie Sie sehen, gibt es in der Instanz nur einen Funktionsparameter. Die meisten Ereignisse in jQuery werden auf die gleiche Weise behandelt. Mithilfe von Ereignishandlern in jQuery bezieht sich der Kontext darauf, welches Objekt das Ereignis ausgelöst hat. Einige Frameworks funktionieren nicht auf diese Weise. Im Fall von Prototype sieht der Code in Listing 7 genauso aus wie Listing 8.
Listing 8: Anhängen von Klickereignissen mithilfe von Prototype
$('the-button').observe('click', function(e) {
alarm('Du hast den Knopf gedrückt!');
});
Das Erste, was Ihnen auffallen wird, ist, dass es keine Klickfunktion gibt, sondern eine Beobachtungsfunktion, die einen Ereignisparameter akzeptiert, bevor sie sich selbst referenziert. Sie werden außerdem feststellen, dass die Funktion einen Parameter e akzeptiert, wobei sich der Kontext auf das Element bezieht, das das Ereignis ausgelöst hat. Um zu sehen, wie es funktioniert, schreiben wir den Code in Listing 6 mit Prototype neu (siehe Listing 9).
Listing 9: Hover-Ereignisse mit Prototype anhängen
$('the-box').observe('mouseover', function(e) {
var el = Event.element(e);
el.addClassName('highlight');
});
$('the-box').observe('mouseout', function(e) {
var el = Event.element(e);
el.removeClassName('highlight');
});
jQuery ist ebenfalls anders. Sie müssen nur die Funktion $ verwenden, um die Kontextvariablen abzurufen, während die Prototype-Bibliothek die Funktion Event.element() verwendet. Darüber hinaus ist Ihnen aufgefallen, dass Sie die Ereignisse „Mouseover“ und „Mouseout“ trennen müssen.
In einigen Tutorials in diesem Artikel können Sie sehen, dass Funktionen inline erstellt und nicht benannt werden. Dies bedeutet, dass es nicht wiederverwendet werden kann, und das Hover-Beispiel von Prototype gibt uns auch die Möglichkeit zu sehen, wie benannte Funktionen verwendet werden. Listing 10 veranschaulicht diese Methode.
Listing 10: Hover-Ereignisse mithilfe von Prototype verbessern
Sie werden feststellen, dass Sie an dieser Stelle nur eine Funktion definieren müssen. Es wird sowohl von Mouseover- als auch von Mouseout-Ereignissen aufgerufen. Diese Funktion ermittelt, ob ein Element einen „Highlight“-Klassennamen hat, und fügt ihn basierend auf dem Ergebnis hinzu oder entfernt ihn. Sie werden auch feststellen, dass der Parameter e implizit übergeben wird. Mit anderen Worten: Sie haben der Beobachtungsfunktion ein mehrdeutiges Argument übergeben.
Nachdruckadresse: http://www.denisdeng.com/?p=720
Ursprüngliche Adresse: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html
Funktion toggleClass(e) {
var el = Event.element(e);
if(el.hasClassName('highlight'))
row.removeClassName('highlight');
anders
row.addClassName('highlight');
}
$('the-box').observe('mouseover', toggleClass);
$('the-box').observe('mouseout', toggleClass);