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 :
2. Application du bouillonnement d'événements
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é.
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é.
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!