Varför och hur för anpassade jQuery-händelser

Så långt tillbaka som 1.0 har jQuery tillhandahållit en triggerfunktion som låter oss:

Kör alla hanterare och beteenden kopplade till de matchade elementen för den givna händelsetypen.

Men det var inte förrän 1.3 som just den här funktionen blev betydligt mer användbar, åtminstone vad jag beträffar. Jag säger det eftersom det var då vi fick möjligheten att definiera anpassade händelser och sedan ställa in hanterare för dem.

Men vad är ett troligt användningsfall där anpassade jQuery-händelser är användbara i WordPress-sammanhang? Av huvudet kanske du kan komma på många. Eller kanske inte.

Det har inte varit förrän på sistone som jag har använt dem betydligt mer än vanligt. Så jag tänkte dela med mig av hur jag använder dem om det är av annan anledning än att visa dig hur du kopplar upp dem till ditt arbete.

Anpassade jQuery-händelser

Om du har erfarenhet av JavaScript – vanilj eller inte – är du förmodligen bekant med grundläggande händelsehanterare. Det vill säga när någon klickar på ett element har vi en funktion inställd på att aktiveras som gör något.

Anpassade jQuery-händelser är ungefär så, förutom att det är händelser som vi definierar. Det betyder att vi inte behöver lita på när någon för musen över ett element eller när de klickar på ett element.

Istället kan vi utlösa en händelse och sedan ha en hanterare inställd för att svara på lämpligt sätt. Här är ett exempel.

Förbereder för ett anpassat event

Låt oss säga att du arbetar med ett projekt och det har en administrationssida som ansvarar för att hämta data från ett tredje parts API. Kontrollflödet skulle se ut ungefär så här:

1. Användaren klickar på en knapp,
2. En Ajax-förfrågan initieras och begär information från tredje part,
3. Medan begäran sker bör knapparna på skärmen vara inaktiverade,
4. När begäran är klar kan knapparna återaktiveras,
5. Alternativt kan ett statusmeddelande skrivas till skärmen.

För att detta ska hända, förväntar den sig att det finns minst en knapp (som i ett inmatningselement) och ett valfritt textfält eller textområde där statusen för begäran kan ske.

När användaren klickar på händelsen kan vi utlösa en anpassad händelse. Vi kan kalla denna händelse acme.ajax.processing. Sedan kan vi sedan använda den färdiga funktionen som tillhandahålls av jQuery för att hantera allt vi vill städa upp efteråt eller så kan vi använda vår anpassade funktion om det är något vi vill hantera i slutet också.

För båda dessa kommer vi att titta på båda. Så vi kommer också att ha ett event som heter acme.ajax.complete.

Så vi är bekymrade över:

• skapa ett anpassat evenemang,
• utlöser det,
• ställa in en händelsehanterare för det,
• avslutas när begäran är klar.

Och det är vad vi kommer att göra.

Definiera en anpassad händelse

Så när en användare klickar på en knapp, görs en Ajax-förfrågan. Samtidigt kommer detta också att utlösa händelsen acme.ajax.processing som kommer att ha sin händelsehanterare.

Så först, låt oss skapa Ajax-förfrågan. För detta kommer jag att anta att knappen som är ansvarig för att utlösa Ajax-förfrågan helt enkelt kallas $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.
  });
});

Observera att det första vi vill göra är att utlösa bearbetningshändelsen och sedan gör vi begäran.

Hantera ett anpassat event

Därefter vill vi se till att vi har en händelsehanterare inställd för att inaktivera knappen medan förfrågan sker.

Detta är lätt att göra och för att hålla det här enkelt, och jag kommer att inaktivera knappen:

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

Lätt, eller hur?

Hantera en annan anpassad händelse

Därefter måste vi hantera situationen när Ajax-förfrågan är klar. Så vi måste se till att trigga händelsen och då måste vi hantera händelsen.

Att utlösa händelsen är lätt:

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

Och hanteringen av händelsen kan ändras till den kod vi redan har:

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

Det kan kedjas eftersom det händer på dokumentobjektet – inte ett separat element.

För det ändamålet, så det är mycket lättare att hantera.

Bara ett exempel

Naturligtvis är detta bara ett exempel på hur man hanterar anpassade jQuery-händelser.

Det finns många andra sätt att göra detta, och du kan göra några ganska komplicerade saker med det; Detta bör dock ge tillräckligt med information för vad du behöver om hur du arbetar med anpassade händelser på en grundläggande nivå.