Délégation d'événements en JavaScript (jQuery)

1 : Qu’est-ce que la délégation événementielle ?

La délégation d'événements utilise le bouillonnement d'événements pour spécifier un seul gestionnaire d'événements afin de gérer tous les événements d'un certain type.

2 : Pourquoi utiliser la délégation d'événements ?

1. Le nombre de gestionnaires d'événements ajoutés à la page en JavaScript est directement lié aux performances globales d'exécution de la page. Pourquoi? Étant donné que chaque fonction de gestion d'événements est un objet, l'objet occupera de la mémoire. Plus il y a d'objets dans la mémoire, plus les performances sont mauvaises. De plus, le nombre de visites DOM provoquées par la nécessité de spécifier tous les gestionnaires d'événements à l'avance retardera le temps de préparation interactive global de la page.
2. Ajouter des événements un par un à une table avec beaucoup de données et une longue liste est un cauchemar. Par conséquent, la délégation d'événements peut considérablement améliorer les performances d'exécution de la page et réduire la charge de travail des développeurs.

Trois : Exemples en JavaScript

Prenons le code HTML suivant comme exemple et utilisons la délégation d'événement pour réaliser que lorsque la souris clique sur un élément li, l'arrière-plan de l'élément li devient rouge.

       <ul id = "lists">
         <li>列表1</li>
         <li>列表2</li>
          <li>列表3</li>
          <li>列表4</li>
         <li>列表5</li>
          <li>列表6</li>
   </ul>

Voici le code JavaScript :

var lists = document.getElementById("lists"); 
          lists.addEventListener("click",function(event){
              var target = event.target;
              //防止父元素ul也触发事件
              if(target.nodeName == "LI"){
                 target.style.backgroundColor = "red";
              }
         })

Cliquez sur Liste 4 pour obtenir l'effet :

Quatre : Exemples dans jQuery

Les méthodes de délégation d'événements dans jQuery sont relativement riches. Prenons le même exemple :

1. Utilisez la méthode on, code Comme suit :

 $(function(){
            $("#lists").on("click","li",function(event){
                 var target = $(event.target);
                 target.css("background-color","red");
             })
         })

2. Utilisez la méthode délégué(), le code est le suivant :

$(function(){
            $("#lists").delegate("li","click",function(event){
                var target = $(event.target);
                 target.css("background-color","red");
             })
         })

la méthode on() et la méthode délégué() sont très similaire à l'écriture de la délégation d'événement. Et lors de l'exécution de la délégation d'événement, seul l'élément enfant (li dans cet article) déclenchera l'événement, et l'élément parent (ul dans cet article) ne déclenchera pas l'événement, nous n'avons donc pas besoin de juger le nom du nœud d'élément qui déclenche l'événement. C'est une chose qui est nettement meilleure que le JavaScript natif.

3. Utilisez la méthode bind(), le code est le suivant :

$(function(){
             $("#lists").bind("click","li",function(event){
                 var target = $(event.target);
                if(target.prop("nodeName")=="LI"){
                 target.css("background-color","red");}
             })
         })

la méthode bind() est la même que la méthode d'implémentation JavaScript native lorsque l'élément parent exécute l'événement. au nom de l'élément enfant, l'élément parent Events sera également déclenché, nous devons donc déterminer le nom de l'élément qui déclenche l'événement. De plus, lorsque vous utilisez la méthode bind() pour lier des événements à des éléments, veuillez noter qu'elle ne peut ajouter des événements qu'aux éléments DOM existants et ne peut pas ajouter d'événements aux futurs éléments DOM. L'élément

ajoute un événement supplémentaire. Si vous souhaitez ajouter fréquemment des éléments DOM et lier des événements aux éléments DOM nouvellement ajoutés, utilisez live(), délégué(), on() et d'autres méthodes. Puisque jQuery ne recommande pas les méthodes live() et délégué() depuis jQuery 1.7, vous devez toujours utiliser la méthode on().

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!