Dlaczego i jak niestandardowe zdarzenia jQuery?

Już w wersji 1.0 jQuery udostępnia funkcję wyzwalacza, która pozwala nam:

Wykonaj wszystkie procedury obsługi i zachowania dołączone do dopasowanych elementów dla danego typu zdarzenia.

Ale dopiero w wersji 1.3 ta konkretna funkcja stała się znacznie bardziej użyteczna, przynajmniej jeśli o mnie chodzi. Mówię tak, ponieważ wtedy uzyskaliśmy możliwość definiowania niestandardowych zdarzeń, a następnie ustawiania ich obsługi.

Jaki jest jednak prawdopodobny przypadek użycia, w którym niestandardowe zdarzenia jQuery są przydatne w kontekście WordPressa? Poza czubkiem głowy możesz wymyślić wiele. Albo może nie.

Dopiero ostatnio używam ich znacznie częściej niż zwykle. Pomyślałem więc, że podzielę się tym, jak ich używam, jeśli teraz z innego powodu niż pokazanie, jak podłączyć je do swojej pracy.

Niestandardowe zdarzenia jQuery

Jeśli masz doświadczenie w JavaScript – waniliowym lub nie – prawdopodobnie znasz podstawowe procedury obsługi zdarzeń. Oznacza to, że gdy ktoś kliknie element, mamy ustawioną funkcję odpalania, która coś robi.

Niestandardowe zdarzenia jQuery są bardzo podobne, z wyjątkiem tych zdarzeń, które definiujemy. Oznacza to, że nie musimy polegać na tym, że ktoś najedzie myszą na element lub gdy kliknie na element.

Zamiast tego możemy wyzwolić zdarzenie, a następnie skonfigurować procedurę obsługi, która odpowiednio zareaguje. Oto przykład.

Przygotowanie do wydarzenia niestandardowego

Załóżmy, że pracujesz nad projektem i ma on stronę administracyjną odpowiedzialną za pobieranie danych z zewnętrznego interfejsu API. Przepływ kontroli wyglądałby mniej więcej tak:

1. Użytkownik klika przycisk,
2. Żądanie Ajax jest inicjowane i żąda informacji od strony trzeciej,
3. Podczas realizacji żądania przyciski na ekranie powinny być wyłączone,
4. Po zakończeniu żądania przyciski można ponownie włączyć,
5. Opcjonalnie na ekranie można zapisać komunikat o stanie.

Aby tak się stało, oczekuje, że istnieje co najmniej jeden przycisk (jak w elemencie wejściowym) i opcjonalne pole tekstowe lub obszar tekstowy, w którym może wystąpić stan żądania.

Gdy użytkownik kliknie zdarzenie, możemy wywołać zdarzenie niestandardowe. Możemy nazwać to zdarzenie acme.ajax.processing. Następnie możemy użyć funkcji done dostarczonej przez jQuery, aby obsłużyć wszystko, co chcemy później posprzątać, lub możemy użyć naszej niestandardowej funkcji, jeśli jest coś, z czym również chcemy się zająć na końcu.

W tym przypadku przyjrzymy się obu. Mamy więc również zdarzenie o nazwie acme.ajax.complete.

Zajmujemy się więc:

• stworzenie wydarzenia na zamówienie,
• wyzwalanie go,
• skonfigurowanie dla niego obsługi zdarzeń,
• zakończenie po zakończeniu żądania.

I to właśnie zrobimy.

Definiowanie zdarzenia niestandardowego

Tak więc, gdy użytkownik kliknie przycisk, zostanie wykonane żądanie Ajax. Jednocześnie spowoduje to również wyzwolenie zdarzenia acme.ajax.processing, które będzie miało swoją procedurę obsługi zdarzeń.

Więc najpierw utwórzmy żądanie Ajax. W tym celu zakładam, że przycisk odpowiedzialny za wywołanie żądania Ajax jest po prostu określany jako $button:

$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.
  });
});

Zauważ, że pierwszą rzeczą, którą chcemy zrobić, jest wyzwolenie zdarzenia przetwarzania, a następnie wykonanie żądania.

Obsługa zdarzenia niestandardowego

Następnie chcemy się upewnić, że mamy skonfigurowaną procedurę obsługi zdarzeń, która wyłącza przycisk podczas trwania żądania.

Jest to łatwe do zrobienia i utrzymania tego prostego, i zamierzam wyłączyć przycisk:

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

Łatwe, prawda?

Obsługa innego zdarzenia niestandardowego

Następnie musimy poradzić sobie z sytuacją, gdy żądanie Ajax zostanie zakończone. Musimy więc upewnić się, że zdarzenie zostało wyzwolone, a następnie musimy je obsłużyć.

Wyzwolenie zdarzenia jest łatwe:

$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');
  });
});

A obsługę zdarzenia można zmienić na kod , który już mamy:

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

Można go połączyć w łańcuch, ponieważ dzieje się to na obiekcie dokumentu – a nie na osobnym elemencie.

W tym celu, więc jest o wiele łatwiejszy w obsłudze.

Tylko jeden przykład

Oczywiście jest to tylko jeden z przykładów obsługi niestandardowych zdarzeń jQuery.

Istnieje wiele innych sposobów na zrobienie tego i możesz z tym zrobić kilka dość skomplikowanych rzeczy; jednak powinno to zapewnić wystarczającą ilość informacji na temat pracy ze zdarzeniami niestandardowymi na podstawowym poziomie.