Les concepts et fonctions du bouillonnement événementiel et de la délégation événementielle

Que sont le bouillonnement d'événements et la délégation d'événements JS ? Des exemples de code spécifiques sont nécessaires

Le bouillonnement d'événements (Event Bubbling) et la délégation d'événements (délégation d'événements) sont deux concepts importants liés au traitement des événements dans JS. Cet article présentera les deux concepts en détail et fournira des exemples de code spécifiques pour expliquer leurs principes d'utilisation et de mise en œuvre.

1. Bulle d'événement

La bulle d'événement signifie que lorsqu'un événement (tel qu'un événement de clic) se produit sur un élément, si l'élément définit un gestionnaire d'événement, l'événement sera déclenché en premier, puis l'événement se propagera à partir du l'élément actuel à l'élément parent niveau par niveau jusqu'à ce qu'il atteigne l'élément racine du document.

Le mécanisme de bouillonnement d'événements nous permet d'ajouter facilement le même gestionnaire d'événements à plusieurs éléments enfants d'un élément parent sans avoir à définir des gestionnaires d'événements distincts pour chaque élément enfant. Cela simplifie le code et le rend plus maintenable.

Ce qui suit est un exemple de code de bouillonnement d'événement :

Code HTML :

<div id="parent">
  <div id="child1">子元素1</div>
  <div id="child2">子元素2</div>
</div>

Code JS :

const parent = document.querySelector('#parent');
const child1 = document.querySelector('#child1');
const child2 = document.querySelector('#child2');

parent.addEventListener('click', function(event) {
  console.log('触发父元素的点击事件');
});

child1.addEventListener('click', function(event) {
  console.log('触发子元素1的点击事件');
  event.stopPropagation();
});

child2.addEventListener('click', function(event) {
  console.log('触发子元素2的点击事件');
  event.stopPropagation();
});

Dans le code ci-dessus, lorsque l'on clique sur l'élément enfant 1 ou l'élément enfant 2, la console affichera à son tour :

触发子元素1的点击事件
触发父元素的点击事件

Le gestionnaire d'événements de l'élément parent ne sera déclenché que lorsque l'événement remontera jusqu'à l'élément parent. Empêchez l'événement de bouillonner en appelant event.stopPropagation().

2. Délégation d'événement

La délégation d'événement fait référence à la liaison du gestionnaire d'événements à l'élément parent et à la détermination d'effectuer ou non l'opération correspondante en jugeant la cible d'origine de l'événement (event.target).

L'avantage de la délégation d'événement est que lorsqu'un nouvel élément enfant est ajouté à l'élément parent, il n'est pas nécessaire de lier un gestionnaire d'événement au nouvel élément enfant séparément, mais l'événement est géré directement via l'élément parent. Cela peut réduire considérablement le nombre de gestionnaires d'événements et améliorer les performances.

Ce qui suit est un exemple de code de délégation d'événement :

Code HTML :

<ul id="parent">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

Code JS :

const parent = document.querySelector('#parent');

parent.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    const textContent = event.target.textContent;
    console.log('点击了项目：' + textContent);
  }
});

Dans le code ci-dessus, lorsque nous cliquons sur un élément li, la console affichera le texte du contenu de l'élément cliqué . Quel que soit le nombre d'éléments li ajoutés ultérieurement, leurs événements de clic seront gérés par l'élément parent.

Le principe de la délégation événementielle est mis en œuvre à travers le bouillonnement événementiel. L'événement remonte d'abord jusqu'à l'élément parent, puis est jugé en fonction de la cible d'origine de l'événement pour déterminer si l'action correspondante doit être effectuée.

Résumé :

Le bouillonnement d'événements et la délégation d'événements sont des concepts importants liés au traitement des événements en JS. La diffusion d'événements nous permet d'ajouter facilement le même gestionnaire d'événements à plusieurs éléments enfants de l'élément parent, améliorant ainsi la réutilisation du code. La délégation d'événements lie le gestionnaire d'événements à l'élément parent, en fonction de la cible d'origine de l'événement. opération correspondante, améliorer les performances et réduire la quantité de code. Dans le développement réel, vous pouvez écrire du code élégant et efficace en utilisant la diffusion d'événements et la délégation d'événements de manière appropriée en fonction de vos besoins.

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!