Maîtriser les méthodes de gestion des événements bouillonnants : résoudre les problèmes causés par les événements bouillonnants JS

Résolvez les problèmes causés par les événements bouillonnants JS : pour comprendre comment gérer les événements bouillonnants en même temps, vous avez besoin d'exemples de code spécifiques

Lors de l'écriture de code JavaScript, nous impliquons souvent le traitement des événements. Un concept important dans le traitement des événements est celui des événements bouillonnants. Un événement bouillonnant signifie que lorsqu'un événement sur un élément est déclenché, ses éléments parents déclencheront également le même événement à leur tour. Même si ce mécanisme peut s’avérer très utile dans certaines situations, il peut parfois poser problème. Cet article explique comment gérer les événements bouillonnants et fournit des exemples de code spécifiques.

1. Problèmes liés aux événements bouillonnants
Avant de comprendre les événements bouillonnants, examinons d'abord les problèmes qui peuvent être causés par les événements bouillonnants. Supposons que nous ayons une structure HTML comme suit :

<div class="outer">
  <div class="inner">
    <button class="btn">点击</button>
  </div>
</div>

Ensuite, nous utilisons JavaScript pour ajouter un gestionnaire d'événements de clic pour le bouton :

var btn = document.querySelector('.btn');
btn.addEventListener('click', function() {
  console.log('按钮被点击了');
});

Maintenant, lorsque nous cliquons sur le bouton, nous verrons la sortie de la console "Le bouton a été cliqué" . C'est normal car nous avons ajouté un gestionnaire d'événements de clic au bouton.

Cependant, supposons que nous ajoutions également un gestionnaire d'événements de clic au div externe :

var outer = document.querySelector('.outer');
outer.addEventListener('click', function() {
  console.log('外层div被点击了');
});

Ensuite, lorsque nous cliquons sur le bouton, non seulement il affichera "Le bouton a été cliqué", mais aussi "Le div externe a été cliqué" " . C'est le problème causé par les événements bouillonnants : lorsqu'un bouton est cliqué, l'événement click est également déclenché sur son élément parent.

2. Comment gérer les événements bouillonnants
Afin de résoudre les problèmes causés par les événements bouillonnants, nous pouvons utiliser les méthodes de traitement suivantes :

1. Arrêter le bouillonnement : en appelant stopPropagation de la méthode de l'objet événement. pour arrêter l'événement bouillonnant. L'exemple de code est le suivant : stopPropagation方法，可以停止事件的冒泡。示例代码如下：

var btn = document.querySelector('.btn');
btn.addEventListener('click', function(event) {
  event.stopPropagation(); // 停止冒泡
  console.log('按钮被点击了');
});

2. 阻止默认行为：有些元素默认会执行一些特定的行为，比如点击a标签会跳转到指定链接。通过调用事件对象的preventDefault

var link = document.querySelector('a');
link.addEventListener('click', function(event) {
  event.preventDefault(); // 阻止默认行为
  console.log('链接被点击了');
});

Empêcher le comportement par défaut : certains éléments exécuteront certains comportements par défaut. Par exemple, cliquer sur la balise a accédera au lien spécifié. Vous pouvez empêcher le comportement par défaut d'un élément en appelant la méthode preventDefault de l'objet événement. L'exemple de code est le suivant :

3. var outer = document.querySelector('.outer');
   outer.addEventListener('click', function(event) {
     if (event.target.classList.contains('btn')) { // 判断事件的目标元素是否是按钮
       console.log('按钮被点击了');
     }
   });

Utilisation de la délégation d'événements : la délégation d'événements fait référence à la liaison du gestionnaire d'événements à l'élément parent et au traitement des événements sur les éléments enfants via le mécanisme de propagation d'événements. Cette méthode peut réduire l'utilisation de la mémoire et améliorer les performances. L'exemple de code est le suivant :
rrreee

Grâce à la délégation d'événements, il vous suffit de lier un gestionnaire d'événements à l'élément parent pour gérer les événements de plusieurs éléments enfants, ce qui simplifie grandement le code.


Résumé : 🎜Lors de l'écriture du code de traitement d'événements en JavaScript, nous devons prêter attention aux problèmes causés par les événements bouillonnants. En arrêtant le bouillonnement, en empêchant les comportements par défaut et en utilisant la délégation d'événements, nous pouvons résoudre efficacement les problèmes causés par les événements de bouillonnement. Dans le même temps, cet article fournit également des exemples de code spécifiques, dans l'espoir d'aider les lecteurs à mieux comprendre et appliquer la méthode de traitement des événements bouillonnants. 🎜

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!