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.