Bullage d'événements JS et capture d'événements (tutoriel graphique, violence simple)

Cet article présente principalement le bouillonnement d'événements et la capture d'événements de JS. Il décrit la différence entre les deux en détail à travers des exemples de code. Les amis qui en ont besoin peuvent s'y référer

À l'école, écoutez celui du professeur. explication Les mécanismes de bouillonnement d'événements et de capture d'événements sont les mêmes que ceux de Tingtianshu. Je me souviens seulement vaguement qu'IE utilise le bouillonnement d'événements et que d'autres navigateurs utilisent la capture d'événements. À cette époque, je considérais cela comme un problème de compatibilité du navigateur IE, donc je ne m'y suis pas penché (les navigateurs inférieurs à IE8 ont été essentiellement retirés du marché). Depuis mon travail, même si j’ai rencontré ce type de problème à plusieurs reprises, je ne l’ai jamais étudié en profondeur, j’en ai toujours eu une compréhension partielle et je me suis appuyé sur des conjectures (si A ne fonctionne pas, choisissez simplement B). J'ai fait une démo aujourd'hui alors que je n'avais rien à faire, et j'ai enfin complètement compris ce problème.

Tout d'abord la conclusion : ce sont des termes utilisés pour décrire les problèmes de timing de déclenchement d'événements. La capture d'événement fait référence au processus allant du document au nœud qui déclenche l'événement, c'est-à-dire de haut en bas pour déclencher l'événement. En revanche, le bouillonnement d’événements déclenche des événements de bas en haut. Le troisième paramètre de la méthode des événements liés est de contrôler si la séquence de déclenchement d'événement est une capture d'événement. vrai, capture d'événement ; faux, événement bouillonnant. La valeur par défaut est false, ce qui signifie que l'événement bouillonne. L'e.stopPropagation de Jquery empêchera le bouillonnement, ce qui signifie qu'en ce qui me concerne, les événements de mon père et de mes ancêtres ne seront pas déclenchés.

Voici la structure HTML

  <p id="parent">
　　  <p id="child" class="child"></p>
  </p>

Maintenant, nous leur lions les événements

  document.getElementById("parent").addEventListener("click",function(e){
  alert("parent事件被触发，"+this.id);
  })
  document.getElementById("child").addEventListener("click",function(e){
  alert("child事件被触发，"+this.id)
  })

Résultat :

l'événement enfant est déclenché, enfant
L'événement parent est déclenché, parent

Conclusion : enfant d'abord, puis parent. Les événements sont déclenchés dans l’ordre de l’intérieur vers l’extérieur, ce qu’on appelle le bouillonnement d’événements.

Maintenant, changez la valeur du troisième paramètre en vrai

　　 document.getElementById("parent").addEventListener("click",function(e){
  alert("parent事件被触发，"+e.target.id);
  },true)
  document.getElementById("child").addEventListener("click",function(e){
  alert("child事件被触发，"+e.target.id)
  },true)

Résultat :

l'événement parent est déclenché, parent
l'événement enfant est déclenché, enfant

Conclusion : d'abord parent, puis enfant. L'ordre de déclenchement des événements est modifié de l'extérieur vers l'intérieur, ce qui correspond à la capture d'événements.

Cela semble inutile. Le dernier cas d'utilisation du bouillonnement d'événements est quelque chose que j'utilise souvent.

　　<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
 </ul>

Les exigences sont les suivantes : le fond du li correspondant devient gris lorsque la souris est placée dessus.

Utiliser le bouillonnement d'événements pour réaliser :

　　$("ul").on("mouseover",function(e){
   $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
  })

Certaines personnes peuvent dire que nous pouvons directement lier les événements à tous les Li. Ce n'est pas gênant du tout, tant que...<🎜. >

　　　$("li").on("mouseover",function(){
   $(this).css("background-color","#ddd").siblings().css("background-color","white");
  })

Oui, ça va aussi. Et en termes de simplicité du code, les deux sont similaires. Cependant, le premier élimine le besoin de parcourir tous les nœuds li, il est donc nettement meilleur en termes de performances.

De plus, si nous chargeons dynamiquement certains éléments sur la page une fois l'événement de liaison terminé...

$("<li>item7</li>").appendTo("ul");À ce stade, la deuxième solution, en raison de l'événement de liaison à ce moment-là À ce moment-là, l'élément 7 n'existait pas encore, donc pour des raisons d'effet, nous devons à nouveau lui lier un événement. Et parce que l'utilisation du système de bouillonnement est un incident lié à ul...
Jugons !

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment utiliser AngularJS pour surveiller l'achèvement du rendu ng-repeat

Utilisez p5. jsExemple de code pour créer des effets spéciaux de feux d'artifice_javascript skills

JS+PHP pour ajouter dynamiquement des méthodes aux classes

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!