Das Warum und Wie von benutzerdefinierten jQuery-Ereignissen

Bereits in Version 1.0 hat jQuery eine Triggerfunktion bereitgestellt, mit der wir Folgendes tun können:

Führt alle Handler und Verhaltensweisen aus, die an die übereinstimmenden Elemente für den angegebenen Ereignistyp angehängt sind.

Aber erst mit 1.3 wurde diese spezielle Funktion deutlich nützlicher, zumindest was mich betrifft. Ich sage das, weil wir zu diesem Zeitpunkt die Möglichkeit erlangten, benutzerdefinierte Ereignisse zu definieren und dann Handler für sie festzulegen.

Was ist jedoch ein wahrscheinlicher Anwendungsfall, in dem benutzerdefinierte jQuery-Ereignisse im Kontext von WordPress nützlich sind? Auf Anhieb fallen Ihnen vielleicht viele ein. Oder vielleicht nicht.

Erst in letzter Zeit benutze ich sie deutlich mehr als sonst. Also dachte ich, ich würde teilen, wie ich sie verwende, wenn auch aus einem anderen Grund, als Ihnen zu zeigen, wie Sie sie mit Ihrer Arbeit verbinden.

Benutzerdefinierte jQuery-Ereignisse

Wenn Sie Erfahrung mit JavaScript haben – Vanilla oder nicht – sind Sie wahrscheinlich mit einfachen Event-Handlern vertraut. Das heißt, wenn jemand auf ein Element klickt, wird eine Funktion ausgelöst, die etwas bewirkt.

Benutzerdefinierte jQuery-Ereignisse sind sehr ähnlich, außer dass dies Ereignisse sind, die wir definieren. Das bedeutet, dass wir uns nicht darauf verlassen müssen, wann jemand seine Maus über ein Element bewegt oder auf ein Element klickt.

Stattdessen können wir ein Ereignis auslösen und dann einen Handler einrichten, der entsprechend reagiert. Hier ist ein Beispiel.

Vorbereitung auf ein benutzerdefiniertes Ereignis

Nehmen wir an, Sie arbeiten an einem Projekt und es hat eine Verwaltungsseite, die für das Abrufen von Daten von einer API eines Drittanbieters verantwortlich ist. Der Kontrollfluss würde in etwa so aussehen:

1. Der Benutzer klickt auf eine Schaltfläche,
2. Eine Ajax-Anfrage wird initiiert und fordert Informationen vom Drittanbieter an,
3. Während die Anforderung ausgeführt wird, sollten die Schaltflächen auf dem Bildschirm deaktiviert sein.
4. Sobald die Anfrage abgeschlossen ist, können Schaltflächen wieder aktiviert werden,
5. Optional kann eine Statusmeldung auf den Bildschirm geschrieben werden.

Dazu wird erwartet, dass es mindestens einen Button (wie in einem Eingabeelement) und ein optionales Textfeld oder Textarea gibt, in dem der Status der Anfrage stehen kann.

Sobald der Benutzer auf das Ereignis klickt, können wir ein benutzerdefiniertes Ereignis auslösen. Wir können dieses Ereignis acme.ajax.processing nennen. Dann können wir die von jQuery bereitgestellte done -Funktion verwenden, um alles zu behandeln, was wir danach bereinigen möchten, oder wir können unsere benutzerdefinierte Funktion verwenden, wenn wir am Ende auch etwas erledigen möchten.

Für diese beiden werden wir uns beide ansehen. Wir haben also auch ein Ereignis namens acme.ajax.complete.

Uns geht es also um:

• Erstellen eines benutzerdefinierten Ereignisses,
• auslösen,
• Einrichten eines Event-Handlers dafür,
• Abschluss, sobald die Anfrage abgeschlossen ist.

Und das werden wir tun.

Definieren eines benutzerdefinierten Ereignisses

Wenn also ein Benutzer auf eine Schaltfläche klickt, muss eine Ajax-Anfrage gestellt werden. Gleichzeitig löst dies auch das Ereignis acme.ajax.processing aus, das seinen Ereignishandler haben wird.

Lassen Sie uns also zuerst die Ajax-Anfrage erstellen. Dazu gehe ich davon aus, dass die Schaltfläche, die für das Auslösen der Ajax-Anfrage verantwortlich ist, einfach als $button bezeichnet wird:

$button.on('click', function(evt) {
  evt.preventDefault();
  $(document).trigger('acme.ajax.processing');

  $.get(ajaxurl, {
    // Your action and security measures here.
  }, function(response) {
    // Your response behavior here.
  });
});

Beachten Sie, dass wir als Erstes das Verarbeitungsereignis auslösen möchten, dann stellen wir die Anfrage.

Behandeln eines benutzerdefinierten Ereignisses

Als Nächstes wollen wir sicherstellen, dass wir einen Event-Handler eingerichtet haben, um die Schaltfläche zu deaktivieren, während die Anfrage ausgeführt wird.

Dies ist einfach zu tun und um dies einfach zu halten, und ich werde die Schaltfläche deaktivieren:

$(document).on('acme.ajax.processing', function() {
  $button.attr('disabled', 'disabled');
});

Einfach richtig?

Behandeln eines anderen benutzerdefinierten Ereignisses

Als nächstes müssen wir die Situation behandeln, wenn die Ajax-Anforderung abgeschlossen ist. Wir müssen also sicherstellen, dass das Ereignis ausgelöst wird, und dann müssen wir das Ereignis behandeln.

Das Auslösen des Ereignisses ist einfach:

$button.on('click', function(evt) {
  evt.preventDefault();
  $(document).trigger('acme.ajax.processing');

  $.get(ajaxurl, {
    // Your action and security measures here.
  }, function(response) {
    // Your response behavior here.
  })
  .done(function() {
     $(document).trigger('acme.ajax.complete');
  });
});

Und die Behandlung des Ereignisses kann in den Code geändert werden, den wir bereits haben:

$(document)
  .on('acme.ajax.processing', function() {
    $button.attr('disabled', 'disabled');
  })
  .on('acme.ajax.complete', function() {
    $button.removeAttr('disabled');
  });

Es kann verkettet werden, da es auf dem Dokumentobjekt geschieht – nicht auf einem separaten Element.

Zu diesem Zweck ist es viel einfacher zu handhaben.

Nur ein Beispiel

Dies ist natürlich nur ein Beispiel dafür, wie benutzerdefinierte jQuery-Ereignisse behandelt werden.

Es gibt viele andere Möglichkeiten, dies zu tun, und Sie können damit einige ziemlich komplizierte Dinge tun. Dies sollte jedoch genügend Informationen für das bieten, was Sie zum Arbeiten mit benutzerdefinierten Ereignissen auf grundlegender Ebene benötigen.