JQuery Kochbuch (German Edition)

anderen Plugins genutzt wird.
Das Event ist ein häufig gebrauchtes, wie
click
oder
ready
. Dort ist die Gefahr von Kollisionen deutlich größer.
    In diesen Situationen sollte es andererseits vollkommen gefahrlos eingesetzt werden können:
    Der Listener ist ein dynamisch erzeugtes DOM-Element, das nur gelegentlich von einem Plugin verwendet wird.
Es handelt sich um ein selbstdefiniertes Event wie
change-color
oder
addUser
.
Sie wollen tatsächlich absichtlich dafür sorgen, dass keiner der gebundenen Handler ausgeführt wird (wie im zweiten Beispiel).

Beim Verwenden von event.target das richtige Element erhalten
    Problem
    Ihr Code basiert auf der Eigenschaft
event.target
[ 11 ] eines Event-Objekts, vermutlich im Zusammenhang mit der Event-Delegation, bei der ein einzelner Eventhandler an einen Container gebunden ist und eine ganze Reihe von abhängigen Elementen betreut.
    In manchen Fällen scheinen Sie nicht das gewünschte Verhalten zu erzielen.
event.target
verweist gelegentlich auf ein Element, das sich innerhalb des von Ihnen erwarteten Elements befindet.
    Lösung
    Die Eigenschaft
event.target
bezieht sich auf das Element, das das Event erhält.
    Wenn Sie zum Beispiel ein Bild innerhalb eines Links haben und Sie auf den Link klicken, wird
event.target
auf das Bild verweisen, nicht auf den Link.
    Wie kann man das nun umgehen? Wenn Sie nicht die Event-Delegation nutzen, sollte die Verwendung von
this
(Scope der Funktion) oder
event.currentTarget
(seit jQuery 1.3) helfen. Damit wird immer auf das Element verwiesen, an das der Eventhandler gebunden ist.
    Arbeiten Sie aber mit der Event-Delegation, dann müssen Sie das übergeordnete Element finden, das Sie eigentlich erwarten.
    Seit jQuery 1.3 können Sie
closest()
verwenden. [ 12 ] Wie in der Dokumentation angegeben, werden ausgehend vom aktuellen Element die Eltern-Elemente anhand eines Selektors durchsucht, bis das naheliegendste gefunden wird.
    Verwenden Sie eine ältere Version von jQuery, dann können Sie
closest()
mit folgendem Code simulieren:
jQuery.fn.closest = function( selector ){
    return this.map(function(){
     var $parents = jQuery(this).parents();
     return jQuery(this).add($parents).filter( selector )[0];
    });
}
    Dies lässt sich aus Performance-Sicht noch ein bisschen verbessern, diese einfache Version sollte jedoch im Allgemeinen ausreichen.
    Hier ein kleines Beispiel für eine sehr häufig auftretenden Situation und den Einsatz von
closest()
:
jQuery('table').click(function(e){
    var $tr = jQuery(e.target).closest('tr');
    // Tue etwas mit der Tabellenzeile
});
    Diskussion
    event.target
ist eine der Eigenschaften des Event-Objekts, die durch das Event-System von jQuery normalisiert werden (im IE wäre es
event.srcElement
).
    Wie kommt es dann, dass ein Event für dieses Ziel-Element ausgelöst wird, aber Ihr Eventhandler trotzdem aufgerufen wird, wenn er doch »nur« an ein übergeordnetes Element gebunden ist? Das liegt am Event Bubbling, also dem »Aufsteigen« von Events im DOM-Baum nach oben. [ 13 ]
    Die meisten Standard-DOM-Elemente steigen nach oben. [ 14 ] Dies bedeutet, dass das Event nach dem Auslösen für das Ziel zu den übergeordneten Knoten aufsteigt und dort das gleiche Event auslöst (mit all seinen Handlern).
    Dieser Prozess setzt sich fort, bis entweder
document
erreicht oder
event.stopPropagation()
in einem Eventhandler aufgerufen wird.
    Dank des Event Bubbling müssen Sie nicht immer Eventhandler an bestimmte Elemente binden – stattdessen können Sie sie einmal an einen Container binden und sie von dort aus behandeln. Dies ist das Prinzip der Event-Delegation.

Mehrere parallele hover()-Animationen vermeiden
    Problem
    Wir sind alle schon mindestens einmal in diese Falle gelaufen. Sie schreiben so etwas wie:
jQuery('#something').hover(
    function(){
     // coole Animation für jQuery(this)
    },
    function(){
     // coole Animation in Ausgangszustand zurückversetzen
    }
);
    So könnten Sie zum Beispiel ein Element immer dann vergrößern, wenn der Mauscursor darüber bewegt wird, und es beim Verlassen mit der Maus wieder zurücksetzen.
    Alles klappt wunderbar, bis Sie die Maus schnell herein- und wieder herausbewegen und … was passiert da?
    Das Element
jQuery('#something')
wird plötzlich viele Male hin- und hergeschaltet, bis die Animation schließlich endet.
    Lösung
    Die Lösung ist wirklich einfach, aber das Problem taucht so häufig auf, dass ich diese Lösung trotzdem als nützlich ansehe.
    Um diesen verrückten Effekt zu