Il perché e il come degli eventi jQuery personalizzati

Fin dalla versione 1.0, jQuery ha fornito una funzione di trigger che ci consente di:

Esegui tutti i gestori e i comportamenti associati agli elementi corrispondenti per il tipo di evento specificato.

Ma è stato solo con la 1.3 che questa particolare funzione è diventata significativamente più utile, almeno per quanto mi riguarda. Lo dico perché è stato allora che abbiamo acquisito la capacità di definire eventi personalizzati e quindi impostare gestori per loro.

Qual è, tuttavia, un probabile caso d’uso in cui gli eventi jQuery personalizzati sono utili nel contesto di WordPress? Dalla parte superiore della tua testa, potresti essere in grado di inventarne molti. O forse no.

È stato solo di recente che li ho usati molto più del solito. Quindi ho pensato di condividere come li sto usando se per ora altro motivo oltre a mostrarti come collegarli al tuo lavoro.

Eventi jQuery personalizzati

Se hai esperienza con JavaScript, vanilla o meno, probabilmente hai familiarità con i gestori di eventi di base. Cioè, quando qualcuno fa clic su un elemento, abbiamo una funzione impostata per attivarsi che fa qualcosa.

Gli eventi jQuery personalizzati sono molto simili a questo, tranne che questi sono eventi che definiamo. Ciò significa che non dobbiamo fare affidamento su quando qualcuno sposta il mouse su un elemento o quando fa clic su un elemento.

Invece, possiamo attivare un evento e quindi impostare un gestore per rispondere in modo appropriato. Ecco un esempio.

Preparazione per un evento personalizzato

Supponiamo che tu stia lavorando a un progetto e che abbia una pagina di amministrazione responsabile del recupero dei dati da un’API di terze parti. Il flusso di controllo sarebbe simile a questo:

1. L’utente fa clic su un pulsante,
2. Viene avviata una richiesta Ajax e richiede informazioni a terze parti,
3. Durante la richiesta, i pulsanti sullo schermo dovrebbero essere disabilitati,
4. Una volta completata la richiesta, è possibile riattivare i pulsanti,
5. Facoltativamente, un messaggio di stato può essere scritto sullo schermo.

Perché ciò avvenga, si aspetta che ci sia almeno un pulsante (come in un elemento di input) e un campo di testo o area di testo opzionale in cui può verificarsi lo stato della richiesta.

Una volta che l’utente fa clic sull’evento, possiamo attivare un evento personalizzato. Possiamo chiamare questo evento acme.ajax.processing. Quindi, possiamo quindi utilizzare la funzione done fornita da jQuery per gestire tutto ciò che vogliamo ripulire in seguito oppure possiamo utilizzare la nostra funzione personalizzata se c’è qualcosa che vogliamo gestire anche alla fine.

Per questo entrambi, esamineremo entrambi. Quindi avremo anche un evento chiamato acme.ajax.complete.

Quindi ci occupiamo di:

• creare un evento personalizzato,
• innescandolo,
• impostare un gestore di eventi per esso,
• terminando una volta completata la richiesta.

Ed è quello che faremo.

Definizione di un evento personalizzato

Quindi, quando un utente fa clic su un pulsante, viene eseguita una richiesta Ajax. Allo stesso tempo, questo attiverà anche l’ evento acme.ajax.processing che avrà il suo gestore di eventi.

Quindi, prima, creiamo la richiesta Ajax. Per questo, suppongo che il pulsante responsabile dell’attivazione della richiesta Ajax sia semplicemente denominato $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.
  });
});

Si noti che la prima cosa che vogliamo fare è attivare l’evento di elaborazione, quindi fare la richiesta.

Gestione di un evento personalizzato

Successivamente, vogliamo assicurarci di avere un gestore di eventi impostato per disabilitare il pulsante mentre è in corso la richiesta.

Questo è facile da fare e per mantenerlo semplice, e ho intenzione di disabilitare il pulsante:

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

Facile, vero?

Gestione di un altro evento personalizzato

Successivamente, dobbiamo gestire la situazione quando la richiesta Ajax è stata completata. Quindi dobbiamo assicurarci di attivare l’evento e quindi dobbiamo gestire l’evento.

Attivare l’evento è facile:

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

E la gestione dell’evento può essere modificata con il codice che già abbiamo:

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

Può essere concatenato perché sta accadendo sull’oggetto del documento, non su un elemento separato.

A tal fine, quindi è molto più facile da gestire.

Solo un esempio

Naturalmente, questo è solo un esempio di come gestire eventi jQuery personalizzati.

Ci sono molti altri modi per farlo e puoi fare alcune cose piuttosto complicate con esso; tuttavia, questo dovrebbe fornire informazioni sufficienti per ciò di cui hai bisogno su come lavorare con eventi personalizzati a livello fondamentale.