Exemple de partage de code natif JS et jQuery sur la délégation d'événements en JavaScript

L'éditeur suivant vous proposera un exemple de délégation d'événements JavaScript (avec du code natif js et jQuery). L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur pour y jeter un œil

Le principe de la délégation d'événement repose sur le bouillonnement d'événements. Vous pouvez déterminer quel élément enfant a déclenché l'événement via la délégation d'événement à l'élément parent pour effectuer une série d'opérations.

Avantages de l'utilisation de la délégation d'événements

1 Il n'est pas nécessaire de parcourir les éléments enfants un par un. , ils peuvent être déclenchés en fonction d'événements L'opération correspondante est effectuée sur l'objet

La structure dom est la suivante :

<ul id = "oUl">
 <li class = "item"></li>
 <li class = "item"></li>
 <li class = "item"></li>
 <li class = "item"></li> 
 <li class = "item"></li>
</ul>

Lorsque l'on clique sur li Quand, imprime la valeur de li.

Avant d'apprendre la délégation d'événements, nous allons parcourir tous les liens et leur ajouter un événement de clic, comme celui-ci :

var aLi = document.getElementsByTagName('li');
for(var i = 0; i < aLi.length; i++) // 遍历li
 aLi[i].addEventListener(&#39;click&#39;, function() { //给每个li添加事件
 console.log(this.innerHTML); 
 });

Après avoir appris la délégation d'événement, le code js natif est le suivant :

var oUl = document.getElementById('oUl');
oUl.addEventListener('click', function(ev) {
 ev = ev||window.event;
 var tag = ev.target; // 触发事件的对象保存在事件的target里面
 console.log(tag.innerHTML);
})

Le code jQuery est le suivant :

$('#oUl').on('click', '.item', function() { 
 console.log($(this).html()); // this指向oUl中触发了click事件并且class为item的子元素
})

En revanche, le délégué à l'événement n'a besoin que d'obtenir l'élément parent et n'a pas besoin de parcourir le li, ce qui améliore beaucoup l'efficacité.

2. Après avoir délégué des événements à l'élément parent, les éléments enfants créés (supprimés) dynamiquement n'ont pas besoin de relier (dissocier) les événements, ce qui permet d'obtenir des mises à jour synchrones des éléments et des événements

Dans le passé, la surveillance des événements js, les éléments enfants créés dynamiquement avec js n'avaient pas d'événements, et les événements devaient leur être liés à nouveau. Cependant, l'utilisation de la délégation d'événements ne nécessite pas autant de problèmes. les événements peuvent toujours implémenter la surveillance des événements.

Bien sûr, la liaison d'événements présente également des inconvénients, car elle repose sur le bouillonnement d'événements. Si le bouillonnement n'est pas pris en charge, la liaison d'événements ne peut pas être implémentée, mais je pense que la probabilité que cela se produise est encore faible. Il y a aussi une mauvaise appréciation des événements. Par exemple, la fonction du bouton 1 et du bouton 2 sur la page est de faire apparaître la valeur lorsque vous cliquez dessus, tandis que la fonction du bouton 3 est de changer la couleur de la page lorsque vous cliquez dessus. Les événements de ces trois boutons sont différents. Lorsque vous modifiez le clic. Si les événements sont délégués à leur élément parent commun, une erreur d'évaluation des événements se produira.

Je pense donc que la délégation d'événements se produit lorsque les fonctions événementielles d'une sous-collection sont les mêmes. Si elles ne sont pas les mêmes, n'utilisez pas la délégation d'événements pour éviter l'échec.

Dans le développement réel, la maîtrise de la liaison d'événements améliorera la standardisation et l'efficacité du code. De manière générale, les avantages l'emportent sur les inconvénients.

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!