Délégation d'événements avec jQuery

Points de base

• Les délégués d'événements en jQuery sont une technique pour attacher un seul gestionnaire d'événements à un élément parent au lieu de plusieurs gestionnaires attachés à des éléments individuels, réduisant ainsi l'utilisation de la mémoire et améliorant les performances.
• Fonction jQuery on() peut être utilisée pour implémenter le délégué d'événements, et le deuxième paramètre facultatif spécifie le sélecteur pour le gestionnaire d'événements du délégué. Utilisez ensuite l'attribut event.target pour identifier quel élément a déclenché l'événement.
• Dans les applications dynamiques, les éléments sont souvent ajoutés ou supprimés, et les délégués d'événements sont particulièrement utiles car il élimine la nécessité de gérer les événements manuellement et réduit la complexité du code. Cependant, il convient de noter que le gestionnaire de sous-événements gère avant de déléguer le gestionnaire d'événements et peut empêcher l'événement de se propager.

jQuery simplifie la gestion des événements en javascript. Cependant, plus les gestionnaires d'événements sont définis, plus il y a de mémoire, ce qui entraînera éventuellement une dégradation des performances et ralentir l'interface utilisateur. Cet article explore comment les délégués d'événements peuvent aider à prévenir cela et comment les délégués d'événements peuvent être appliqués dans jQuery. Les délégués d'événements sont une technique de traitement d'événements qui, au lieu de ajouter un gestionnaire d'événements, est directement à chaque élément qui est d'écouter un événement, il ajoute un seul gestionnaire d'événements à l'élément parent de ces éléments pour écouter pour ses éléments enfants. Lors du traitement d'un événement, vérifiez quel élément déclenche l'événement et répond en conséquence. Les délégués d'événements dépendent des bulles d'événements dans le DOM. Il s'agit du processus d'événements déclenchés sur les enfants se propageant à l'arbre Dom à son élément parent et à son élément parent, etc. jusqu'à ce qu'il atteigne le document. Les programmeurs peuvent utiliser event.stopPropagation() pour arrêter de bouillonner. Notez que tous les événements DOM ne se propageront pas, le focale, le brouillage, la charge et le déchargement ne le feront pas. Les délégués d'événements utilisent moins de mémoire car vous remplacez plusieurs gestionnaires d'événements par un seul gestionnaire d'événements. Par exemple, si vous joignez un gestionnaire d'événements à chaque lien dans la liste des dix liens, dix gestionnaires d'événements occupent un espace mémoire. Au lieu de cela, si vous utilisez des délégués d'événements et gérez les événements sur l'élément parent, un seul gestionnaire d'événements est créé et moins de mémoire est utilisée que la mémoire attachée à chaque lien séparément. En plus de réduire la consommation de mémoire, la délégation des événements présente également les avantages suivants:

• Pas besoin de gérer manuellement les événements lors de l'ajout d'éléments ou de supprimer des éléments de DOM. Si nous utilisons la gestion des événements traditionnels, nous devons attacher le gestionnaire d'événements à l'élément ajouté au DOM et supprimer le gestionnaire d'événements de l'élément supprimé du DOM.
• Réduisez le code à gérer avec moins de gestionnaires d'événements. Cela peut simplifier notre code sans aucune logique de traitement des événements en double, ce qui aide à garder notre javascript concis et sec.

Exemple de délégation d'événements dans jQuery

Supposons que vous développez une application à une seule page qui vend des photos de chaton. Lorsque la page se charge, les 20 meilleurs chatons seront affichés. Lorsque l'utilisateur fait défiler la page, plus de chatons seront chargés. Notre HTML ressemble à ceci:

<div id="cats">
  <ul>
    <li>
      <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt=""/>
      <a href="https://www.php.cn/link/207f170979dd72ff5776e20d07c28732">More info</a>
      <button>Add to cart</button>
    </li>
    ...
  </ul>
</div>

En utilisant la manipulation des événements traditionnels, nous devons connecter le gestionnaire d'événements à:

1. Une image plus grande s'affiche lorsque l'utilisateur clique sur la vignette.
2. Plus d'informations s'affichent lorsque l'utilisateur clique sur le lien "plus d'informations".
3. Ajoutez l'image au panier lorsque l'utilisateur clique sur "Ajouter au panier".
4. attacher ces trois événements au nouvel élément DOM ajouté lorsque l'utilisateur fait défiler la page.

Ce code sera similaire à l'exemple suivant. Notez que cela est destiné à montrer comment l'ajout d'un gestionnaire d'événements vers des éléments individuels diffère de l'utilisation des délégués d'événements, il n'y a donc aucune implémentation prévue pour loadImage(), moreInfo(), addToCart() et loadNewKittens() fonctions.

$(document).ready(function() {
  var cats = $('#cats');

  cats.find('img')
    .on('click', function() {
      loadImage();
    })

  cats.find('a')
    .on('click', function(event) {
      event.preventDefault();
      moreInfo();
    });

  cats.find('button')
    .on('click', function() {
      addToCart();
    });

  $(window).scroll(function() {
    var fragment = loadNewKittens();
    // 为新的DOM元素附加事件处理程序
    fragment.find('img')
      .on('click', function() {
        loadImage();
      });

    fragment.find('a')
      .on('click', function(event) {
        event.preventDefault();
        moreInfo();
      });

    fragment.find('button')
      .on('click', function() {
        addToCart();
      });

    fragment.appendTo('#cats ul');
  });
});

Le volume de code est assez grand. Voyons maintenant à quoi ressemble notre code si nous utilisons les délégués d'événements:

$(document).ready(function() {
  $('#cats')
    .on('click', 'img, a, button', function(event) {
      event.preventDefault();
      var target = event.target;

      switch(target.tagName.toLowerCase()) {
        case 'img':
          loadImage();
          break;
        case 'a':
          moreInfo();
          break;
        case 'button':
          addToCart();
          break;
        default:
          // 什么也不做
      }
    });

  $(window).scroll(function() {
    var fragment = loadNewKittens();
    fragment.appendTo('#cats ul');
  });
});

La clé réside dans le deuxième paramètre facultatif de on(). En passant le sélecteur ici, on() sait qu'il gère le gestionnaire d'événements du délégué au lieu du gestionnaire d'événements directement lié. Notre code de gestion des événements est beaucoup plus simple maintenant. En obtenant event.target et en commutant en fonction de son tagName, nous pouvons déterminer quel élément a déclenché l'événement et répondre en conséquence. De plus, nous n'avons plus besoin d'attacher des gestionnaires d'événements aux éléments chargés dans $(window).scroll, car les événements déclenchés par ces nouveaux éléments sont délégués à l'élément parent. Un "piège" potentiel à noter lors de l'utilisation des délégués d'événements est que tout gestionnaire d'événements attaché à un élément enfant est géré avant que le gestionnaire d'événements délégate ne déclenche . Par conséquent, le gestionnaire de sous-événements peut appeler ou retourner event.stopPropagation(), ce qui empêchera l'événement de bouillonner dans le gestionnaire d'événements du délégué et vous laissera perplexe expliquant pourquoi votre événement n'est pas délégué. false

Conclusion

Dans cet article, nous étudions la délégation des événements. Nous avons vu comment cela peut aider à améliorer les performances d'un site Web en réduisant la charge de traitement des événements qu'il doit supporter. Nous avons également vu comment implémenter le délégué d'événements dans jQuery via la fonction

. on()

Les questions fréquemment posées sur la délégation de l'événement jQuery

Qu'est-ce que le délégué des événements à jQuery et pourquoi cela compte?

Les délégués d'événements en jQuery sont une technique qui vous permet de joindre un seul auditeur d'événements à l'élément parent, qui tirera pour tous les descendants de sélecteurs assortis, que ces descendants existent maintenant ou s'ajoutent à l'avenir. Ceci est important car il peut considérablement améliorer les performances en réduisant le nombre de gestionnaires d'événements requis par l'application. Au lieu d'ajouter des gestionnaires d'événements individuels à chaque élément, vous pouvez déléguer des événements aux éléments parents. Ceci est particulièrement utile dans les applications dynamiques où les éléments sont ajoutés ou supprimés dynamiquement.

Comment fonctionne la délégation des événements dans jQuery?

Les délégués d'événements en jQuery profitent du fait que la plupart des événements jQuery bouillonner ou se propageront à l'arbre Dom. Lorsqu'un événement est licencié sur un élément enfant, il bouillonnera à son élément parent. En ajoutant un auditeur d'événements à l'élément parent, vous pouvez capturer des événements déclenchés sur l'un de ses éléments enfants. L'attribut event.target peut être utilisé pour déterminer quel élément enfant a déclenché l'événement.

Quelle est la différence entre les événements directs et les événements délégués dans jQuery?

Les événements directs sont directement attachés à des éléments spécifiques, et seuls ces éléments peuvent déclencher des événements. D'un autre côté, les événements délégués sont attachés à l'élément parent et tout élément enfant peut déclencher des événements. L'avantage des événements délégués est qu'ils peuvent gérer des événements d'éléments enfants ajoutés dynamiquement.

Comment utiliser la méthode .on() pour effectuer une délégation d'événements dans jQuery?

La méthode .on() dans jQuery est utilisée pour attacher des gestionnaires d'événements. Pour les délégués d'événements, vous utiliserez trois paramètres: type d'événement, chaîne de sélecteur utilisée pour filtrer les descendants et les fonctions de gestionnaire. Un type d'événement est une chaîne représentant le type d'événement (par exemple, "cliquez"), une chaîne de sélecteur est utilisée pour filtrer les descendants de l'élément sélectionné qui déclenche l'événement, et une fonction de gestionnaire est une fonction à exécuter lorsque l'événement est déclenché.

Puis-je utiliser le délégué d'événements pour gérer des éléments ajoutés dynamiquement dans jQuery?

Oui, l'un des principaux avantages des délégués d'événements dans jQuery est qu'il peut gérer des événements d'éléments qui sont ajoutés dynamiquement. Étant donné que l'écouteur d'événements est attaché à l'élément parent, il peut capturer des événements déclenchés sur l'un de ses éléments enfants, même si ces événements sont ajoutés après l'attachement de l'écouteur de l'événement.

Qu'est-ce que la bulle d'événements, et qu'est-ce que cela a à voir avec la délégation des événements à jQuery?

L'événement Bubble est un type de propagation d'événement dans lequel un événement commence par l'élément spécifique qui le déclenche puis bouillonne vers ses ancêtres. Les délégués d'événements dans jQuery utilisent des bulles d'événements pour joindre les écouteurs d'événements aux éléments parents. Lorsqu'un événement est licencié sur un élément enfant, il bouillonnera à l'élément parent, où l'écouteur de l'événement peut le capturer.

Comment arrêter la propagation des événements dans jQuery?

Vous pouvez utiliser la méthode .stopPropagation() pour arrêter la propagation des événements dans jQuery. Cette méthode empêche les événements de bouillonner dans l'arbre Dom, empêchant ainsi tout gestionnaire parent de recevoir des notifications d'événements. Cependant, vous devez l'utiliser avec prudence car cela rendra votre code plus difficile à déboguer et à comprendre.

Quelle est la différence entre les méthodes

et .bind() utilisées pour le traitement des événements dans jQuery? .on()

La méthode

dans jQuery est utilisée pour attacher un gestionnaire d'événements directement à un élément. D'un autre côté, la méthode .bind() peut être utilisée pour attacher un gestionnaire d'événements directement à un élément (tel que .on()) ou à un élément parent pour la déléguation des événements. La méthode .bind() est plus générale et est la méthode préférée pour attacher des gestionnaires d'événements dans jQuery. .on()

Puis-je utiliser le délégué des événements pour gérer les événements personnalisés dans jQuery?

Oui, vous pouvez utiliser le délégué des événements pour gérer les événements personnalisés dans jQuery. Comme les événements standard, vous pouvez joindre un écouteur d'événements à un élément parent, qui capturera des événements personnalisés déclenchés sur l'un de ses enfants.

Comment supprimer le gestionnaire d'événements à jQuery?

Vous pouvez utiliser la méthode .off() pour supprimer le gestionnaire d'événements dans jQuery. Cette méthode peut être utilisée pour supprimer tous les gestionnaires d'événements sur un élément, ou pour supprimer uniquement les gestionnaires d'événements avec un type d'événement spécifique ou un espace de noms connecté.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!