El por qué y el cómo de los eventos jQuery personalizados

Ya en 1.0, jQuery ha proporcionado una función de activación que nos permite:

Ejecuta todos los controladores y comportamientos adjuntos a los elementos coincidentes para el tipo de evento dado.

Pero no fue hasta la versión 1.3 que esta función en particular se volvió significativamente más útil, al menos en lo que a mí respecta. Digo eso porque fue entonces cuando obtuvimos la capacidad de definir eventos personalizados y luego establecer controladores para ellos.

Sin embargo, ¿cuál es un caso de uso probable en el que los eventos personalizados de jQuery son útiles en el contexto de WordPress? En la parte superior de tu cabeza, es posible que puedas pensar en muchos. O tal vez no.

No ha sido hasta últimamente que los he estado usando significativamente más de lo habitual. Así que pensé en compartir cómo los estoy usando si ahora fuera por otra razón que mostrarte cómo conectarlos a tu trabajo.

Eventos jQuery personalizados

Si tiene experiencia con JavaScript (vainilla o no), es probable que esté familiarizado con los controladores de eventos básicos. Es decir, cuando alguien hace clic en un elemento, tenemos una función configurada para activarse que hace algo.

Los eventos jQuery personalizados se parecen mucho a eso, excepto que estos son eventos que definimos. Esto significa que no tenemos que depender de cuando alguien mueve el mouse sobre un elemento o cuando hace clic en un elemento.

En su lugar, podemos desencadenar un evento y luego configurar un controlador para que responda adecuadamente. Aquí hay un ejemplo.

Preparación para un evento personalizado

Supongamos que está trabajando en un proyecto y tiene una página de administración responsable de recuperar datos de una API de terceros. El flujo de control se vería así:

1. El usuario hace clic en un botón,
2. Se inicia una solicitud Ajax y solicita información del tercero,
3. Mientras se realiza la solicitud, los botones en la pantalla deben estar deshabilitados,
4. Una vez completada la solicitud, los botones se pueden volver a habilitar,
5. Opcionalmente, se puede escribir un mensaje de estado en la pantalla.

Para que esto suceda, se espera que haya al menos un botón (como en un elemento de entrada) y un campo de texto o área de texto opcional en el que puede ocurrir el estado de la solicitud.

Una vez que el usuario hace clic en el evento, podemos activar un evento personalizado. Podemos llamar a este evento acme.ajax.processing. Luego, podemos usar la función done proporcionada por jQuery para manejar cualquier cosa que queramos limpiar después o podemos usar nuestra función personalizada si hay algo que también queremos manejar al final.

Para estos dos, veremos ambos. Así que también tendremos un evento llamado acme.ajax.complete.

Así que nos preocupamos por:

• crear un evento personalizado,
• activándolo,
• configurar un controlador de eventos para ello,
• terminando una vez que se completa la solicitud.

Y eso es lo que haremos.

Definición de un evento personalizado

Entonces, cuando un usuario hace clic en un botón, se está realizando una solicitud de Ajax. Al mismo tiempo, esto también activará el evento acme.ajax.processing que tendrá su controlador de eventos.

Entonces, primero, creemos la solicitud Ajax. Para esto, supondré que el botón responsable de activar la solicitud de Ajax simplemente se denomina $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.
  });
});

Tenga en cuenta que lo primero que queremos hacer es activar el evento de procesamiento y luego hacemos la solicitud.

Manejo de un evento personalizado

A continuación, queremos asegurarnos de que tenemos un controlador de eventos configurado para deshabilitar el botón mientras se realiza la solicitud.

Esto es fácil de hacer y mantenerlo simple, y voy a deshabilitar el botón:

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

Fácil, ¿verdad?

Manejo de otro evento personalizado

A continuación, debemos manejar la situación cuando se complete la solicitud de Ajax. Entonces, debemos asegurarnos de activar el evento y luego debemos manejar el evento.

Activar el evento es fácil:

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

Y el manejo del evento se puede cambiar al código que ya tenemos:

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

Se puede encadenar porque sucede en el objeto del documento, no en un elemento separado.

Con ese fin, por lo que es mucho más fácil de manejar.

solo un ejemplo

Por supuesto, este es solo un ejemplo de cómo manejar eventos jQuery personalizados.

Hay muchas otras formas de hacer esto, y puedes hacer algunas cosas bastante complicadas con él; sin embargo, esto debería proporcionar suficiente información para lo que necesita sobre cómo trabajar con eventos personalizados en un nivel fundamental.