In einem vorherigen Blogpost schrieb ich über das gesteuerte Aufrufen von JS-Funktionen mittels Callback. Neben dieser Form der Ablaufsteuerung gibt es noch das Definieren von eigenen Events.
Wenn wir uns an den Callback-Artikel erinnern, so wurde dort die Funktion hideMessage()
per Callback durch die Funktion showMessage()
ausgeführt.
jQuery Custom Events per trigger
Zum Glück ist es so, dass mehrere Wege nach Rom führen. So lässt sich
auf völlig andere Art und Weise das Gleiche erreichen: per jQuery
Custom Events. Dafür stellt jQuery die Methode .trigger()
zur Verfügung. Die einfachste Definition eines eigenen Events wäre demnach
$.event.trigger('myEvent');
Wobei der Handler dann wie folgt notiert wird:
$(document).on('myEvent', function() {
// auszufuehrender Code
});
Neben dem einfachen Notieren des Eventnamens können beim triggern
auch beliebige Daten mitgegeben werden. Eine erweiterte Definition des
obigen Codes sieht dann wie folgt aus:
$.event.trigger({
type: 'myEvent',
myData: 'someString'
});
$(document).on('myEvent', function(event) {
console.log(event.myData);
});
Ein Beispiel
Wenn wir uns nun das Beispiel aus dem oben verlinkten Blogpost
nehmen, um statt einem Callback ein Custom Event einzusetzen, dann würde
das wie folgt aussehen:
function showMessage() {
// jQuery: AJAX-Aufruf
$.ajax({
url: '/path/to/my/script.php',
data: 'param=value'
})
.done(function(data) {
$(body).append('<div id="message">' + data + '</div>');
$.event.trigger({
type: 'MessageIsVisible',
messageSelector: '#message'
});
});
}
function hideMessage(selector) {
$(selector)
.hide(0)
.delay(5000)
.detach();
}
Die Funktion showMessage()
ist nun so abgeändert, dass sie das Event "MessageIsVisible" abfeuert, nachdem der div-Container mit der ID "message" in die Seite gehangen wurde. Der Funktion hideMessage()
geben wir als Parameter den Selektor des Message-Containers mit. Dem
Beispiel folgend soll diese Nachricht schließlich nach fünf Sekunden
wieder verschwinden:
$(document).on('MessageIsVisible', function(event) {
hideMessage(event.MessageSelector);
});
Den Geltungsbereich einschränken
Anstatt das Event Dokumentenweit zu definieren, lässt es sich auch an
ein bestimmtes Objekt binden. Dies kann etwas selbst definiertes sein
oder aber auch ein Elementobjekt a la
function showMessage() {
...
.done(function(data) {
var $message = $('<div id="message">' + data + '</div>');
$(body).append($message);
$($message).trigger('MessageIsVisible');
});
}
$('#message').on('MessageIsVisible', function() {
hideMessage();
});
Fertig ist der neue alte gesteuerte Funktionsaufruf per jQuery Custom Event.
Einen Kommentar schreiben