JQuery Kochbuch (German Edition)

'+e.data.color+' Button angeklickt');
}

jQuery('#button1').bind('click', {panel:1, color:'roten'} , buttonClicked);
jQuery('#button2').bind('click', {panel:2, color:'blauen'} , buttonClicked);
jQuery('#button3').bind('click', {panel:3, color:'grünen'} , buttonClicked);
    Natürlich könnten Sie das mit einer Schleife noch kürzer hinbekommen. Dieser Ansatz wird von manchen als Makro bezeichnet und er wird zusammen mit jQuery sehr häufig eingesetzt.
    Diese Makros verringern auf jeden Fall die Menge an Code und können manchmal auch die Lesbarkeit verbessern. Allerdings kann Ihr Code manchmal auch komplett unlesbar werden, daher sollten Sie immer vorsichtig vorgehen.
    So könnten Sie mit einer Schleife arbeiten:
jQuery.each(['roten','blauen','grünen'], function(num, color){
     num++; // it's 0-index based
     jQuery('#button'+num).bind('click',function(e){
     jQuery('div.panel').hide();
     jQuery('#panel'+num).show();
     jQuery('#desc').text('Sie haben den '+color+' Button angeklickt');
     });
})
    Wie Sie sehen, habe ich das Daten-Argument nicht verwendet, weil wir es nicht wirklich benötigen. Der Code ist so noch kürzer, allerdings nicht viel. Dafür hat die Lesbarkeit ein wenig gelitten.
    Sie können also in solchen Situationen beide Vorgehensweisen wählen. Abhängig vom Problem wird die eine Vorteile gegenüber der anderen haben (kürzer, lesbarer, leichter wartbar).

Ein ganzes Set mit Eventhandlern entfernen
    Problem
    Sie haben einen Plugin-ähnlichen Codeblock geschrieben, der viele Eventhandler an bestimmte DOM-Elemente bindet.
    Später wollen Sie diese dann alle aufräumen, um das Plugin wieder komplett entfernen zu können.
    Wenn Sie viele Handler hinzugefügt haben, kann das etwas aufwändig werden. Vielleicht haben Sie nicht einmal Zugriff auf die gebundenen Handler, weil sie zu einem anderen lokalen Gültigkeitsbereich gehören.
    Sie können nicht einfach einen Handler von einem bestimmten Event (oder überhaupt ein Event) »entbinden«, da Sie damit auch andere Handler löschen könnten, an die Sie gar nicht gedacht haben.
    Lösung
    Nutzen Sie einen eindeutigen Namensraum für jedes Plugin,das Sie erstellen. Alle Handler, die mit diesem Plugin gebunden werden, müssen in diesem Namensraum hinzugefügt werden.
    Wenn Sie dann später wieder aufräumen, müssen Sie nur den gesamten Namensraum »entbinden« und alle dazugehörigen Eventhandler werden mit einer einzigen Codezeile verschwunden sein.
    Diskussion
    Wie bindet man mit einem Namensraum?
    Um einen Event-Typ um einen Namensraum zu ergänzen, fügen Sie einfach einen Punkt, gefolgt vom Namen des Namensraums an.
    Seit jQuery 1.3 können Sie mehr als einen Namensraum pro Event hinzufügen.
    So binden Sie die Funktionen
click
und
mousedown
mit einem Namensraum:
jQuery.fn.myPlugin = function(){
    return this
     .bind('click .myPlugin ', function(){
     // [Code]
     })
     .bind('mousedown .myPlugin ', function(){
     // [Code]
     });
};
    Wie räumt man später auf?
    Um die oben erzeugten Bindings wieder zu entfernen, nutzen Sie folgenden Code:
jQuery.fn.disposeMyPlugin = function(){
    return this.unbind(' .myPlugin ');
};

Eventhandler auslösen
    Problem
    Sie müssen einen Event für ein bestimmtes Element (oder auch mehrere) auslösen. Dieses Element gehört zu einem oder mehreren Plugins, daher können auch mehrere Eventhandler daran gebunden sein.
    Handelt es sich um ein häufig genutztes Event, wie zum Beispiel
click
oder
mousedown
, können damit auch andere Eventhandler ausgelöst werden, die Sie gar nicht erwartet haben.
    Lösung
    Wie beim vorigen Rezept können auch hier Namensräume genutzt werden.Beim Binden müssen Sie nur darauf achten, dass Sie jeder Gruppe von Handlern einen eindeutigen Namensraum zuweisen.
    Das kann auch für die umgekehrte Situation nützlich sein. Wenn Sie alle Events auslösen müssen, nur nicht die mit einem Namensraum, können Sie den Operator ! verwenden. Ein entsprechendes Beispiel wird im Diskussionsabschnitt angeführt werden.
    Diskussion
    Wie löst man Handler mit einem bestimmten Namensraum aus?
    Stellen Sie sich vor, Sie wollen das Click-Event per Code auslösen, das durch das Plugin myPlugin gebunden wurde. Sie könnten einfach das Click-Element auslösen, aber das wäre schlecht, da andere Hander, die an das gleiche Event gebunden wären, ebefalls ausgelöst würden.
    So machen Sie es richtig:
jQuery.fn.runMyPlugin = function(){
     return this.trigger('click .myPlugin ');
};
    Wie löst man Handler aus, die keinen