JQuery Kochbuch (German Edition)
$image.trigger('prev');
});
$('#next').click(function(){
$image.trigger('next');
});
$image.trigger('goto', 0); // Mit 0 initialisieren
$image.trigger('start'); // automatisch loslaufen
})( jQuery );
----
Note
Ich habe
trigger()
genutzt, weil es klein und nett ist. Schneller wäre es aber,
triggerHandler()
zu verwenden, weil
trigger()
für ein Event Bubbling sorgt (seit jQuery 1.3) und Sie das vermutlich nicht brauchen.
----
Was passiert, wenn ein Element schon eines dieser Events besitzt?
Es kann passieren (auch wenn es seltsam wäre), dass das Element
#slideshow
schon ein Binding für ein Event mit dem Namen
prev
,
next
,
goto
,
start
oder
stop
besitzt.
In diesem Fall schauen Sie bei Eventhandler auslösen nach einer Lösung.
Wie kann ich es anderen ermöglichen, die hinzugefügten Eventhandler wieder abzuräumen?
Da ich die Funktionen zum Binden nicht nach außen gegeben habe, kann auch kein anderer externer Code die Eventhandler wieder freigeben.
In den meisten Fällen können Sie einfach alle Events vom Element »entbinden«, wie zum Beispiel:
jQuery('#slideshow').unbind('prev next goto start stop'); // Jedes Element
// enumerieren oder
jQuery('#slideshow').unbind(); // Einfach alles entfernen
Wenn Sie vorsichtiger die Handler entfernen müssen oder einfach alle Events loswerden wollen, schauen Sie sich einmal Ein ganzes Set mit Eventhandlern entfernen an.
Was ist der Unterschied zu anderen Vorgehensweisen?
Es gibt andere Techniken, um von außen Einfluss zu nehmen. Ich werde ein paar zum Vergleich vorstellen:
Das Plugin kann Anweisungen entgegennehmen
Dieses Muster wird (unter anderem) von jQuery UI genutzt. Dabei werden Aktionen ausgeführt, wenn dem Plugin als erstem Argument ein String übergeben wird, zum Beispiel:
jQuery('#image').slideshow('goto', 1);
Das ist ein weniger kürzer als das Verwenden von Events, aber bei diesem Ansatz müssen Sie alle notwendigen Daten (hier der aktuelle Index) öffentlich abspeichern, so dass sie später ausgelesen werden können. Entwickler, die dieses Muster nutzen, tendieren auch dazu,
data()
zu verwenden, um die Variablen abzuspeichern.
Wenn Sie Events nutzen, können Sie einfach lokale Variablen verwenden, da Ihre Eventhandler Zugriff auf den lokalen Gültigkeitsbereich des Plugins besitzen.
Ein Objekt mit Methoden zurückgeben
Dieses Muster wird vom Plugin
validate
von Jörn Zaefferer genutzt (und natürlich auch von anderen).
Abhängig von der Programmierung können die Methoden des Objekts eventuell auf lokale Variablen zugreifen. Dazu müssen Sie Closures nutzen, [ 20 ] welche sich leider leicht missbrauchen lassen. Zudem müssen Sie dieses Objekt irgendwo (global) speichern. Dazu benötigen Sie dann pseudo-objektorientierten Code (was Sie vielleicht mögen – vielleicht aber auch nicht).
Sie können auch eine Lösung nutzen, die irgendwo zwischen diesem Ansatz und dem von mir erläuterten liegt. Anstatt die Events (
prev
,
next
und so weiter) an das DOM-Element zu binden, können Sie ein Objekt erzeugen (mit
jQuery.listener
), die Events daran binden und es dann zurückgeben. Wie wir in Das globale Auslösen von Events beschleunigen gesehen haben, ist das Listener-Objekt nicht auf Events beschränkt. Es kann auch Methoden und sogar Daten in seinen Attributen besitzen.
Benachrichtigungen erhalten, wenn jQuery-Methoden aufgerufen werden
Problem
Sie wollen eine bestimmte Aktion ausführen, wenn ein DOM-Element mit Hilfe von jQuery verändert wird. Dazu kann das Ändern eines Attributs gehören – wie zum Beispiel eine CSS-Eigenschaft – aber auch das Entfernen aus dem Dokument und so weiter.
Manche Browser bieten für solche Situationen schon Events an (sogenannte Mutation Events [ 21 ] ), die unsere Anforderungen erfüllen werden, aber Sie können diese nicht Browser-übergreifend nutzen und sie sind auch nicht in jQuery integriert.
Eine andere Situation ist das Verändern der Argumente, die an jQuery-Methoden übergeben werden, bevor sie zur Ausführung gelangen. Nach dem gleichen Prinzip können Sie auch die von einer Methode zurückgegebenen Daten nach dem Ausführen der Funktion beeinflussen.
Lösung
Das hängt mit der aspektorientierten Programmierung zusammen, [ 22 ] aber hier werden wir keine Funktionen einbetten, sondern die gewünschte Methode einmal überladen und Events immer dann auslösen, wenn die Methode aufgerufen wird.
Wir brauchen ein Event, das ausgelöst wird, bevor die Funktion abläuft, um die
Weitere Kostenlose Bücher