JQuery Kochbuch (German Edition)

Für dieses Feature benötigen Sie ein Objekt mit mindestens einer Funktion, die jedes Mal für jedes Element aufgerufen wird, wenn es gebunden wird, sowie eine andere Funktion, um das aufzuräumen, was Sie vorher alles erstellt haben.
    Die Syntax sieht in etwa so aus:
jQuery.event.special.myEvent = {
    // Das eigene Element binden
    setup:function( data, namespaces ){
     this; // Das zu bindende Element
     // false für das normale Binding, ansonsten wird
     // es übersprungen
    },
    // Aufräumen
    teardown:function( namespaces ){
     this; // Das gebundene Element
     // Rückgabe von false wie oben
    }
};
    Nachdem Sie Ihr Event-Verhalten hinzugefügt haben, können Sie wie im folgenden Beispiel vorgehen:
jQuery('#some_element').bind('myEvent', {foo:'bar'}, function(){...});
    Danach wird Ihre Funktion
setup()
aufgerufen.
    Diskussion
    Bindings für Ihr Event
    Wie schon erläutert wird Ihre Funktion
setup()
nur aufgerufen, wenn der erste Handler hinzugefügt wird.
    Das ist ausreichend, wenn die Logik, die Sie für dieses Event kapseln wollen, keine Anweisungen benötigt, die bei jedem Binden ausgeführt werden müssen.
    Diese Option wird von jQuery angeboten, aber das Vorgehen hat sich seit jQuery 1.3.3 geändert.
    Nutzen Sie eine ältere Version, dann müssen Sie anstatt
jQuery.event.special
nur
jQuery.event.specialAll
verwenden. Dabei wird die gleiche Art von Objekten entgegengenommen und Ihre Callbacks erhalten die gleichen Argumente. Der einzige Unterschied liegt darin, dass die Rückgabe von false keine Änderung bewirkt.
    Ab jQuery 1.3.3 gibt es
jQuery.event.specialAll
nicht mehr. Um alle Bindings für ein Event behandeln zu können, müssen Sie eine Funktion
add()
(und optional
remove()
) für Ihrem Namensraum
jQuery.event.special
mit aufnehmen. Die Funktionen erhalten den Handler, der gebunden werden soll, und sie können optional eine neue Handler-Funktion zurückgeben, die stattdessen genutzt werden soll.
    Ein reales Beispiel
    Lassen Sie uns das Ganze anhand eines einfachen Beispiels deutlicher machen. Ich werde dabei die Notation ab Version 1.3.3 nutzen.
    Gehen wir davon aus, dass Sie ein Event auslösen wollen, wenn ein Element selektiert (angeklickt) wird und dabei nicht inaktiv ist. Wir nehmen an, dass das Element inaktiv ist, wenn es die CSS-Klasse
disabled
besitzt.
    Dies ließe sich wie folgt umsetzen:
// Objekte sichern, um den Code kürzer zu machen
// Nicht im globalen Gültigkeitsbereich machen!
var event = jQuery.event;
var $selected = event.special.selected = {
    setup:function( data ){
     event.add(this, 'click', $selected.handler);
     return false;
    },
    teardown:function(){
     event.remove(this, 'click', $selected.handler);
     return false;
    },
    handler:function(){
     var $elem = jQuery(this);
     if( !$elem.hasClass('disabled') )
     $elem.triggerHandler('selected');
    }
};
    Wie Sie sehen, stellen wir unseren eigenen Handler für
selected
bereit. Innerhalb des Handlers nutzen wir
triggerHandler()
anstatt
trigger()
, da wir kein Event Bubbling benötigen. Es gibt auch keine Standard-Aktionen, die zu verhindern sind, so ersparen wir uns einige unnötige Schritte.
    Bestehende Anwendungsfälle für dieses Feature
    Mit
jQuery.event.special
können Sie neue Verhaltensweisen hinzufügen, ohne den jQuery-Namensraum vollzumüllen.
    Das bringt nicht in jeder Situation etwas, aber es ist praktisch, wenn Sie ein eigenes Event benötigen, das auf einem anderen basiert (in unserem Beispiel
click
). Es ist auch nützlich, wenn Sie ein Plugin haben, das nur Events bindet oder sie simuliert – dann können Sie dieses Plugin als normales Event »maskieren«.
    Der jQuery-Core nutzt
jQuery.event.special
, um mit den Events zu arbeiten, die an
document.ready
gebunden sind. Sie sind sogar als normale Eventhandler abgelegt, aber beim ersten Binden an dieses Event aktivieren Sie den Code zur Erkennung.
    Dieses Feature wird auch verwendet, um die Events
mouseenter
/
mouseleave
transparent zu verwalten (genutzt durch
hover()
). Alle Operationen zum Durchlaufen des DOM, die dazu notwendig sind, werden elegant in den
setup()
-Handlern verborgen.
    Es gibt zudem Plugins,die sich
jQuery.event.special
zunutze machen. Dazu gehören:
    mousewheel
Unterstützung für Mausräder. [ 17 ]
    drag
,
drop
Unterstützung für Drag and Drop mit Hilfe einfacher Events. [ 18 ]
    focusin
,
focusout
Dieses Codestück (kein echtes Plugin), das ursprünglich von Jörn Zaefferer entwickelt wurde, wurde später über Plugins hinzugefügt, um eine Event-Delegation