Le pourquoi et le comment des événements jQuery personnalisés

Dès la version 1.0, jQuery a fourni une fonction de déclenchement qui nous permet de :

Exécute tous les gestionnaires et comportements attachés aux éléments correspondants pour le type d’événement donné.

Mais ce n’est qu’à partir de la version 1.3 que cette fonction particulière est devenue beaucoup plus utile, du moins en ce qui me concerne. Je dis cela parce que c’est à ce moment-là que nous avons acquis la possibilité de définir des événements personnalisés, puis de définir des gestionnaires pour eux.

Quel est, cependant, un cas d’utilisation probable dans lequel les événements jQuery personnalisés sont utiles dans le contexte de WordPress ? Du haut de votre tête, vous pourrez peut-être en trouver beaucoup. Ou peut être pas.

Ce n’est que récemment que je les utilise beaucoup plus que d’habitude. J’ai donc pensé que je partagerais comment je les utilise si pour l’instant autre chose que de vous montrer comment les connecter à votre travail.

Événements jQuery personnalisés

Si vous avez de l’expérience avec JavaScript – vanille ou non – vous connaissez probablement les gestionnaires d’événements de base. Autrement dit, lorsque quelqu’un clique sur un élément, nous avons une fonction définie pour se déclencher qui fait quelque chose.

Les événements jQuery personnalisés ressemblent beaucoup à cela, sauf que ce sont des événements que nous définissons. Cela signifie que nous n’avons pas à compter sur le moment où quelqu’un déplace sa souris sur un élément ou lorsqu’il clique sur un élément.

Au lieu de cela, nous pouvons déclencher un événement, puis configurer un gestionnaire pour répondre de manière appropriée. Voici un exemple.

Préparation d’un événement personnalisé

Disons que vous travaillez sur un projet et qu’il a une page d’administration chargée de récupérer les données d’une API tierce. Le flux de contrôle ressemblerait à ceci :

1. L’utilisateur clique sur un bouton,
2. Une requête Ajax est initiée et demande des informations au tiers,
3. Pendant que la demande est en cours, les boutons à l’écran doivent être désactivés,
4. Une fois la requête terminée, les boutons peuvent être réactivés,
5. En option, un message d’état peut être écrit à l’écran.

Pour que cela se produise, il s’attend à ce qu’il y ait au moins un bouton (comme dans un élément d’ entrée) et un champ de texte facultatif ou une zone de texte dans laquelle le statut de la demande peut se produire.

Une fois que l’utilisateur clique sur l’événement, nous pouvons déclencher un événement personnalisé. Nous pouvons appeler cet événement acme.ajax.processing. Ensuite, nous pouvons utiliser la fonction done fournie par jQuery pour gérer tout ce que nous voulons nettoyer par la suite ou nous pouvons utiliser notre fonction personnalisée s’il y a aussi quelque chose que nous voulons gérer à la fin.

Pour ces deux, nous allons regarder les deux. Nous aurons donc également un événement appelé acme.ajax.complete.

Nous sommes donc concernés par :

• créer un événement personnalisé,
• le déclenchant,
• la mise en place d’un gestionnaire d’événements pour cela,
• terminer une fois la demande terminée.

Et c’est ce que nous ferons.

Définir un événement personnalisé

Ainsi lorsqu’un utilisateur clique sur un bouton, une requête Ajax est en train d’être faite. En même temps, cela va également déclencher l’ événement acme.ajax.processing qui aura son gestionnaire d’événements.

Alors d’abord, créons la requête Ajax. Pour cela, je vais supposer que le bouton responsable du déclenchement de la requête Ajax est simplement appelé $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.
  });
});

Notez que la première chose que nous voulons faire est de déclencher l’événement de traitement, puis nous faisons la demande.

Gérer un événement personnalisé

Ensuite, nous voulons nous assurer que nous avons un gestionnaire d’événements configuré pour désactiver le bouton pendant que la demande est en cours.

C’est facile à faire et pour rester simple, et je vais désactiver le bouton :

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

Facile, non ?

Gérer un autre événement personnalisé

Ensuite, nous devons gérer la situation lorsque la requête Ajax est terminée. Nous devons donc nous assurer de déclencher l’événement, puis nous devons gérer l’événement.

Le déclenchement de l’événement est simple :

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

Et la gestion de l’événement peut être remplacée par le code que nous avons déjà :

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

Il peut être chaîné car il se produit sur l’ objet document – pas un élément séparé.

À cette fin, il est donc beaucoup plus facile à manipuler.

Juste un exemple

Bien sûr, ce n’est qu’un exemple de la façon de gérer les événements jQuery personnalisés.

Il existe de nombreuses autres façons de le faire, et vous pouvez faire des choses assez compliquées avec; cependant, cela devrait fournir suffisamment d’informations pour ce dont vous avez besoin sur la façon de travailler avec des événements personnalisés à un niveau fondamental.