JQuery Kochbuch (German Edition)

klarstellen, dass ich mit dem Begriff Plugin in den meisten Fällen »Plugin, Widget oder einfach ein Code-Abschnitt« meine. Die meisten jQuery-Anwender tendieren dazu, ihren Code in Plugin-ähnlichen Strukturen zu organisieren und dabei dem jQuery-Namensraum Namen hinzuzufügen.
    Schließlich wurde das Event-Modul von jQuery in der Version 1.3 stark verändert. Ich werde immer erwähnen, wenn etwas je nach jQuery-Version unterschiedlich gehandhabt werden muss.

Einen Handler mit vielen Events verbinden
    Problem
    In vielen häufig vorkommenden Situationen muss man die gleiche Handler-Funktion an mehr als ein Element binden (allerdings für das gleiche Element). Folgendes geht immer:
jQuery('
div'
).
click
(function(e){
alert('Event');
}
)
     .
keydown
(function(e){
alert('Event');
}
);
    Dies ist kein Problem, wenn die Funktion kurz ist, aber bei längeren Codeblöcken ist es nicht so trivial, immer alles zu wiederholen, und vor allem ist es keine gute Programmierpraxis.
    Lösung
    Es gibt mehr als eine Lösung für dieses einfache, aber immer wieder auftretende Problem.
    Eine Möglichkeit zur Lösung, die ohne Wiederholungen auskommt, ist diese:
function handler(e){ alert('Event'); } jQuery('
div'
).
click
( handler )
     .
keydown
( handler );
    Das einmalige Definieren einer Funktion und das folgende mehrfache Verweisen auf diese Funktion ist keine schlechte Vorgehensweise, aber es gibt in jQuery noch eine einfachere Möglichkeit.
    bind()
kann auch eine Liste von Events mitgegeben werden – getrennt durch Leerzeichen. Sie können also das Problem auch so lösen:
jQuery('
div'
).
bind
( 'click keydown' ,
function(e){
alert('Event');
});
    Diskussion
    Sie können dieses Vorgehen auch bei
unbind()
und
one()
nutzen.
    Um eine bestimmte Funktion von einem Event zu »trennen«, brauchen Sie eine Referenz auf sie. Selbst wenn Sie also das Multievent-Feature nutzen, müssen Sie sich immer noch eine Referenz auf den Handler merken. Übergeben Sie keine Funktion an
unbind()
, dann werden alle Eventhandler, die mit diesem Event verbunden sind, ebenfalls entfernt:
function handler(e){ alert('Event'); } jQuery('
div'
).
bind('click
keydown', handler );

// ...

jQuery('
div'
).
unbind('click
keydown', handler );

Eine Handler-Funktion mit anderen Daten wiederverwenden
    Problem
    Sie haben mehrere Bindings und die Handler-Funktionen sehen sich sehr ähnlich. Es ist egal, ob diese Bindings auf unterschiedliche Kombinationen aus Element und Event angewandt werden. Sie wollen nur nicht immer wieder den gleichen Code schreiben (wer will das schon?).
    Hier ein Beispiel:
jQuery('#button1').click(function(e){
     jQuery('div.panel').hide();
     jQuery('#panel1').show();
     jQuery('#desc').text('Sie haben den roten Button angeklickt');
});

jQuery('#button2').click(function(e){
     jQuery('div.panel').hide();
     jQuery('#panel2').show();
     jQuery('#desc').text('Sie haben den blauen Button angeklickt');
});

jQuery('#button3').click(function(e){
     jQuery('div.panel').hide();
     jQuery('#panel3').show();
     jQuery('#desc').text('Sie haben den grünen Button angeklickt');
});
    Wie Sie sehen, liegt der Unterschied zwischen den Handlern nur in der Farbe und dem anzuzeigenden Panel. Wenn Sie noch mehr Buttons hinzufügen, würde auch die Menge an Code wachsen, weil Sie jedes Mal einen Handler schreiben müssten.
    Lösung
    bind()
kann ein optionales Argument
data
mitgegeben werden, dass dann an die spezifische Handler-Funktion gebunden wird. Die Werte dieses Arguments lassen sich innerhalb der Funktion über
event
.data
ansprechen. [ 2 ] Dabei ist
event
das Argument des Event-Objekts, das von jQuery bereitgestellt wird.
    Bei diesem Wert kann es sich um alles handeln – ein Array, ein String, eine Zahl oder ein Objekt-Literal.
    Häufig übergibt man ein Objekt-Literal, auch wenn Sie nur einen Wert benötigen, um den Code lesbarer zu gestalten. Durch den Namen, den Sie diesem einen Attribut im Objekt verpassen, wird Ihr Code etwas lesbarer.
    Diskussion
    event
.data
wird genutzt, um einer Funktion vorberechnete Werte mitzugeben. Das heißt, die Werte, die Sie an
bind()
übergeben, müssen schon zum Zeitpunkt des Bindens vorhanden sein. Um »dynamischere« Werte zu nutzen, gibt es einen anderen Weg, den wir in Dynamische Daten an Eventhandler übergeben kennenlernen werden.
    Die Lösung für das Problem kann in etwa so aussehen:
function buttonClicked(e){
     jQuery('div.panel').hide();
     jQuery('#panel'+e.data.panel).show();
     jQuery('#desc').text('Sie den