JQuery Kochbuch (German Edition)

Namensraum haben?
    Vielleicht wollen Sie umgekehrt auch einen Click (oder ein anderes Event) auslösen, aber das fragliche Element wird von einem oder mehreren Plugins mit betreut. Das Auslösen eines Events könnte zum unerwünschten Aufruf von weiteren Eventhandlern führen. Solche Probleme lassen sich dann ausgesprochen schwierig debuggen.
    Wenn alle Plugins einen Namensraum nutzen, können Sie folgendermaßen einen sicheren Click auslösen:
jQuery('div.panels').trigger('click ! ');

Dynamische Daten an Eventhandler übergeben
    Problem
    Sie wollen Werte an einen Eventhandler übergeben, die aber beim Binden noch nicht bekannt sind und die bei jedem Aufruf des Handlers anders sein können.
    Lösung
    Es gibt zwei Wege, dieses Problem zu lösen:
    Zusätzliche Arguemte an die Methode
trigger()
übergeben
Ein eigenes Event-Objekt an
trigger()
übergeben
    Beide Ansätze funktionieren und keiner hat gegenüber dem anderen besondere Vorteile. Der zweite Ansatz ließ sich vor jQuery 1.3 allerdings nur umständlich einsetzen. Bei den höheren Versionen funktioniert aber auch dieser Weg ohne große Schwierigkeiten. Ich werde im Diskussions-Abschnitt beide Optionen behandeln.
    Übergibt man Daten an den Handler anstatt sie von der Funktion selbst holen zu lassen (aus globalen Variablen, dem jQuery-Namensraum und so weiter), lässt sich der Code leichter warten, da die Handler-Funktionen einfacher aufgebaut sind und keine Bedingungen an die Umgebung stellen.
    Damit können Sie den gleichen Handler für verschiedene Situationen nutzen.
    Diskussion
    Zusätzliche Argumente übergeben
    Man kann der Funktion
trigger()
einen oder mehrere Werte übergeben, die dann an die ausgelösten Handler weitergereicht werden.
    Diese Werte können einen beliebigen Typ besitzen. Haben Sie mehrere Werte, müssen Sie sie in ein Array stecken:
jQuery('form').trigger('submit', ['John','Doe', 28, {gender:'M'}] );
    Die gebundene Funktion, die durch diesen Code aufgerufen würde, könnte wie folgt aussehen:
jQuery('form').bind('submit', function(e, name, surname, age, extra ){
    // Tue etwas mit den Argumenten
});
    Dieses Vorgehen ist einfach und beim Studieren des Codes auch direkt verständlich. Nur wenn man viele Argumente mitgeben muss, sieht der Code nicht mehr so hübsch aus. Ich persönlich würde nicht mehr als fünf Argumente nutzen.
    Zudem kann diese Lösung verwirrend sein, wenn jemand den üblichen Funktions-Typ
function(e){ }
gewohnt ist.
    Sie fragen sich, wo diese anderen Argumente herkommen können?
    Mehr Beispiele
    Mit einem eigenen Event:
jQuery('#slideshow').bind('add-image', function(e, src ){
    var $img = jQuery('').attr('src', src);
    jQuery(this).append($img);
});
jQuery('#slideshow').trigger('add-image', 'img/dogs4.jpg' );
    Mit einem »eingebauten« Event:
jQuery('#button').bind('click', function(e, submit ){
    if( submit )
     // Tue etwas
    else
     // Tue etwas anderes
});
jQuery('#button').trigger('click', true );
    Ein eigenes Event-Objekt übergeben
    Wenn Sie stattdessen lieber ein eigenes Event-Objekt übergeben möchten, muss der Handler auf die übergebenen Werte als Attribute des Objekts zugreifen.
    Das bedeutet, dass der Handler unabhängig von der tatsächlichen Anzahl der Daten immer nur ein einzelnes Argument besitzt – das Event-Objekt.
    Das ist gegenüber dem ersten Ansatz immer ein Vorteil, da die Funktionsdeklaration damit weniger ausschweifend wird.
    Wie schon erwähnt gestaltet sich dieses Vorgehen seit jQuery 1.3 viel angenehmer. So würden Sie das erste Beispiel mit einem eigenen Objekt programmieren:
jQuery('form').bind('submit', function(e){
    // Tue etwas mit e.name, e.surname usw.
});
jQuery('form').trigger({
    type:'submit',
    name:'John',
    surname:'Doe',
    age: 28,
    gender:'M'
});
    Übergibt man ein literales Objekt, ist dies eine Kurzform für das Erstellen einer Instanz von
jQuery.Event
. [ 3 ] Dies ist eine andere Variante:
var e = jQuery.Event('submit'); // der Operator
new
kann weggelassen werden
e.name = 'John';
e.surname = 'Doe';
e.age = 28;
e.gender = 'M';
jQuery('form').trigger(e);
    Sie können natürlich
jQuery.extend
nutzen, anstatt ein Attribut nach dem anderen zu setzen.
    Sie müssen selber ein Event-Objekt erzeugen, wenn Sie nach dem Aufruf von
trigger()
Daten aus diesem Objekt auslesen wollen. Das ist übrigens eine ziemlich geniale Möglichkeit, Informationen vom Handler an die aufrufende Methode zu übergeben (wir werden uns im nächsten Kapitel damit befassen).
    Was ist der Unterschied zu