Analyser le mécanisme et l'utilisation du bouillonnement d'événements

Le bouillonnement d'événements est un mécanisme de diffusion d'événements souvent utilisé dans le développement front-end. Dans cet article, nous expliquerons en détail les principes et les applications du bouillonnement d'événements et fournirons des exemples de code pour aider les lecteurs à mieux comprendre.

1. Le principe du bouillonnement d'événement
Le bouillonnement d'événement signifie que lorsqu'un événement sur un élément est déclenché, il sera transmis étape par étape aux éléments supérieurs jusqu'à l'élément racine. En d’autres termes, les événements sont transmis en commençant par l’élément le plus spécifique et en progressant vers les éléments plus généraux.

Le principe du bouillonnement d'événements peut se résumer aux points suivants :

1. La propagation des événements se fait de l'élément enfant vers l'élément parent, jusqu'à l'élément racine.
2. Les événements de l'élément enfant seront transmis à son élément parent, puis transmis à l'élément parent un niveau au-dessus, jusqu'à l'élément racine.
3. Pendant le processus de livraison des événements, si les éléments parents de chaque couche sont liés aux mêmes gestionnaires d'événements, alors ces gestionnaires d'événements seront appelés.

2. Application du bouillonnement d'événements

1. Liaison d'événements simplifiée : en utilisant le mécanisme de bouillonnement d'événements, nous pouvons lier le gestionnaire d'événements à l'élément parent, réduisant ainsi le besoin de lier les événements à plusieurs éléments enfants respectivement. Cette approche peut améliorer la maintenabilité et l'efficacité d'exécution du code.

Par exemple, nous avons un div d'élément parent, qui contient plusieurs boutons d'éléments enfants, et le même gestionnaire d'événements de clic sur chaque bouton. Si nous utilisons le bouillonnement d'événements, nous n'avons besoin de lier un événement à l'élément parent div qu'une seule fois, comme indiqué ci-dessous :

<div id="parentElement">
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
</div>

<script>
var parentElement = document.getElementById('parentElement');
parentElement.addEventListener('click', function(e) {
  console.log(e.target.innerHTML + '被点击了');
});
</script>

Dans le code ci-dessus, nous lions un gestionnaire d'événements de clic à l'élément parent div. Lorsqu'un bouton d'élément enfant est cliqué, l'événement remonte jusqu'au div de l'élément parent et déclenche le gestionnaire d'événements de l'élément parent. En imprimant l'attribut cible de l'objet événement, nous pouvons obtenir le bouton spécifique cliqué.

2. Délégation d'événements : la délégation d'événements est une technologie courante qui utilise le mécanisme de bouillonnement d'événements pour gérer les éléments ajoutés dynamiquement. En liant les gestionnaires d'événements aux éléments parents, les événements correspondants peuvent être déclenchés sur les éléments enfants ajoutés dynamiquement.

Par exemple, nous avons ajouté dynamiquement un nouveau bouton bouton dans l'exemple précédent, comme indiqué ci-dessous :

<div id="parentElement">
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
</div>

<script>
var parentElement = document.getElementById('parentElement');
parentElement.addEventListener('click', function(e) {
  if (e.target.tagName.toLowerCase() === 'button') {
    console.log(e.target.innerHTML + '被点击了');
  }
});

var newButton = document.createElement('button');
newButton.innerHTML = '新按钮';
parentElement.appendChild(newButton);
</script>

Dans le code ci-dessus, nous avons lié un gestionnaire d'événement click sur l'élément parent div, en jugeant l'événement si la cible déclenchée element est un bouton permettant de filtrer les éléments qui n'ont pas besoin d'être traités. De cette façon, nous pouvons gérer les événements de clic pour les éléments ajoutés dynamiquement sans avoir à lier des événements distincts pour chaque élément nouvellement ajouté.

3. Arrêter la propagation de l'événement : en appelant la méthode stopPropagation() de l'objet événement dans le gestionnaire d'événements, vous pouvez arrêter la diffusion continue de l'événement.

Par exemple, nous lions un événement click au bouton de l'élément enfant et appelons la méthode stopPropagation() dans le gestionnaire d'événements, comme indiqué ci-dessous :

<div id="parentElement">
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
</div>

<script>
var buttons = document.getElementsByTagName('button');

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function(e) {
    console.log(e.target.innerHTML + '被点击了');
    e.stopPropagation();
  });
}

var parentElement = document.getElementById('parentElement');
parentElement.addEventListener('click', function(e) {
  console.log('父元素被点击了');
});
</script>

Dans le code ci-dessus, lorsque l'on clique sur le bouton de l'élément enfant, l'événement sera déclenché Le gestionnaire d'événements click de l'élément enfant lui-même et appelle la méthode stopPropagation() pour empêcher l'événement de continuer à être livré. Par conséquent, le gestionnaire d'événements click de l'élément parent ne sera pas déclenché.

Résumé :
Le bouillonnement d'événements est un mécanisme de diffusion d'événements couramment utilisé dans le développement front-end, qui peut simplifier la liaison d'événements, mettre en œuvre la délégation d'événements et contrôler la diffusion d'événements. En utilisant correctement la diffusion d'événements, nous pouvons améliorer la maintenabilité du code et l'efficacité de l'exécution.

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!