Apprenez à utiliser les événements bouillonnants pour obtenir des effets interactifs : exemple d'analyse d'événements bouillonnants JS

Analyse d'exemples d'événements bouillonnants JS : pour maîtriser comment utiliser les événements bouillonnants pour obtenir des effets interactifs, des exemples de code spécifiques sont nécessaires

Avec le développement d'Internet, JavaScript (JS) est devenu une technologie importante dans le développement front-end . Dans le développement front-end, les événements bouillonnants JS sont souvent utilisés pour obtenir des effets interactifs. Cet article présentera les concepts de base et l'utilisation des événements bouillonnants JS à travers des exemples de code spécifiques, et analysera comment utiliser les événements bouillonnants pour obtenir certains effets interactifs courants.

1. Concepts de base des événements bouillonnants JS
Dans les documents HTML, la structure des éléments est souvent une relation imbriquée. Lorsqu'un élément déclenche un événement, l'événement remonte jusqu'à l'élément parent jusqu'à ce qu'il atteigne l'élément racine du document. C'est le concept de base des événements bouillonnants JS. Les événements bouillonnants incluent les événements de clic courants, les événements d'entrée et de sortie de la souris, les événements de clavier, etc.

2. Utilisation spécifique des événements bouillonnants

1. Créer une structure HTML
   Tout d'abord, nous devons créer des éléments HTML avec des relations imbriquées pour démontrer le processus de livraison des événements bouillonnants. Par exemple, créez un conteneur div et ajoutez plusieurs éléments div à l'intérieur du conteneur. Le code est le suivant :

<div id="container">
  <div>元素1</div>
  <div>元素2</div>
  <div>元素3</div>
</div>

2. Ajouter du code JS
   Ensuite, nous devons ajouter du code JS pour lier les écouteurs d'événements à ces éléments à des fins d'observation. processus de livraison bouillonnant des événements. Le code est le suivant :

var container = document.getElementById('container');
var elements = container.getElementsByTagName('div');

// 为每个元素绑定事件监听器
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('click', function(event){
    console.log('当前元素：', event.target.innerHTML);
    console.log('冒泡元素：', getBubblingElements(event));
  });
}

// 递归获取所有冒泡元素
function getBubblingElements(event) {
  var bubblingElements = [];
  var currentElement = event.target;
  
  while (currentElement !== document) {
    bubblingElements.push(currentElement.innerHTML);
    currentElement = currentElement.parentNode;
  }
  
  return bubblingElements;
}

Dans le code, nous obtenons d'abord l'élément conteneur et ses sous-éléments, puis lions un écouteur d'événement click à chaque sous-élément. Lorsqu'un élément enfant est cliqué, l'écouteur imprime le contenu de l'élément actuel et de tous les éléments bulles.

3. Test des événements bouillonnants
   Enfin, nous pouvons tester le processus de livraison des événements bouillonnants en cliquant sur l'élément div. Lorsque nous cliquons sur un élément div, la console affichera le contenu de l'élément actuellement cliqué et de tous les éléments bouillonnants. Par exemple, si l'on clique sur l'élément 3, le résultat de sortie est le suivant :

当前元素： 元素3
冒泡元素： [元素3, 元素2, 元素1, #container]

Les résultats ci-dessus montrent que l'élément réellement cliqué est l'élément 3 et que le processus de bouillonnement passe par l'élément 2, l'élément 1 et l'élément conteneur (# conteneur) en séquence.

3. Utiliser des événements bouillonnants pour obtenir des effets interactifs
Après avoir maîtrisé les concepts de base et l'utilisation spécifique des événements bouillonnants, nous pouvons utiliser des événements bouillonnants pour obtenir certains effets interactifs courants. Ce qui suit prend l'annulation du bouillonnement, le proxy d'événement et la délégation d'événement comme exemple d'analyse.

1. Annuler le bouillonnement
   Parfois, nous souhaitons qu'un événement soit exécuté uniquement sur l'élément actuel sans être transmis à l'élément parent. À ce stade, vous pouvez utiliser la méthode stopPropagation de l'objet événement pour annuler le bouillonnement de l'événement. Par exemple, nous modifions le code ci-dessus pour que seul le contenu de l'élément actuellement cliqué soit affiché sur la console :

// 为每个元素绑定事件监听器
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('click', function(event){
    console.log('当前元素：', event.target.innerHTML);
    console.log('冒泡元素：', getBubblingElements(event));
    event.stopPropagation(); // 取消事件冒泡
  });
}

Dans le code modifié, la méthode stopPropagation de l'objet événement est ajoutée en appelant cette méthode dans l'écouteur. peut annuler l'événement. De cette façon, lorsqu'un élément div est cliqué, seul l'élément actuel et son contenu seront affichés sur la console.

2. Proxy d'événement
   Lorsque de nombreux éléments DOM doivent être liés au même écouteur d'événement, vous pouvez utiliser des proxys d'événement pour simplifier le code. En liant l'écouteur d'événement à l'élément parent et en utilisant le processus de transmission d'événements bouillonnants, l'événement de l'élément enfant est capturé sur l'élément parent. Par exemple, nous modifions le code ci-dessus pour lier l'écouteur d'événement à l'élément conteneur :

container.addEventListener('click', function(event){
  if (event.target.tagName === 'DIV') { // 只处理div元素的点击事件
    console.log('当前元素：', event.target.innerHTML);
    console.log('冒泡元素：', getBubblingElements(event));
  }
});

Dans le code modifié, liez l'écouteur d'événement à l'élément conteneur et jugez l'événement dans le code de l'écouteur. détermine si l'élément div est cliqué. De cette façon, quel que soit le nombre d’éléments div que nous ajoutons au conteneur, nous n’avons besoin que d’un seul écouteur d’événement.

3. Délégation d'événements
   La délégation d'événements est un moyen d'utiliser efficacement les événements bouillonnants. Vous pouvez placer un certain type d'écouteur d'événements sur l'élément parent et des événements proxy sur tous les éléments enfants de ce type. Par exemple, nous modifions le code ci-dessus pour ajouter uniquement un écouteur d'événement click pour l'élément conteneur et proxy les événements click de tous les éléments div :

container.addEventListener('click', function(event){
  if (event.target.tagName === 'DIV') { // 只处理div元素的点击事件
    console.log('当前元素：', event.target.innerHTML);
    console.log('冒泡元素：', getBubblingElements(event));
  }
});

Dans le code modifié, seul un écouteur d'événement click est ajouté pour l'élément conteneur, et Le code de l'écouteur détermine si le tagName de event.target est un élément div. De cette façon, quel que soit le nombre d'éléments div que nous ajoutons au conteneur, ils seront traités par le proxy de l'écouteur d'événements.

Résumé :
Cet article présente les concepts de base et l'utilisation des événements bouillonnants JS à travers des exemples de code spécifiques, et analyse en détail comment utiliser les événements bouillonnants pour obtenir certains effets interactifs courants, notamment l'annulation du bouillonnement, le proxy d'événements et la délégation d'événements. Maîtriser l'utilisation des événements bouillonnants peut améliorer l'efficacité des effets interactifs dans le développement front-end et offrir aux utilisateurs Web une meilleure expérience utilisateur. J'espère que cet article aidera les lecteurs à comprendre et à appliquer les événements bouillonnants JS.

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!