Comprendre et mettre en œuvre les principes et méthodes de bouillonnement et de capture d'événements

Le principe et la mise en œuvre du bouillonnement d'événements et de la capture d'événements

Le bouillonnement d'événements (Event Bubbling) et la capture d'événements (Event Capturing) sont deux mécanismes différents en JavaScript pour gérer les événements DOM (Document Object Model). Comprendre leurs principes et leur mise en œuvre peut nous aider à mieux comprendre et gérer les événements.

Principe du bouillonnement d'événements :
Le bouillonnement d'événements signifie que lorsqu'un événement spécifique se produit sur un certain élément DOM, si l'élément définit une fonction de gestionnaire pour l'événement, l'événement sera d'abord déclenché sur l'élément, puis bouillonnera jusqu'au élément parent de l'élément jusqu'à ce que la fonction de gestionnaire de l'élément racine du document soit déclenchée.

Méthode d'implémentation :
En JavaScript, nous pouvons utiliser la méthode addEventListener pour ajouter des écouteurs d'événements aux éléments afin d'obtenir un bouillonnement d'événements.
Ce qui suit est un exemple :

// HTML代码：
<div id="outer">
  <div id="inner">
    <button id="btn">按钮</button>
  </div>
</div>

// JavaScript代码：
const outer = document.querySelector('#outer');
const inner = document.querySelector('#inner');
const btn = document.querySelector('#btn');

outer.addEventListener('click', function() {
  console.log('外层div被点击！');
});

inner.addEventListener('click', function() {
  console.log('内层div被点击！');
});

btn.addEventListener('click', function(event) {
  console.log('按钮被点击！');
  event.stopPropagation(); // 阻止事件冒泡
});

Dans le code ci-dessus, lorsque nous cliquons sur le bouton, l'événement bouillonnant sera déclenché étape par étape vers le haut à partir de l'élément le plus interne, en exécutant d'abord le gestionnaire d'événement de clic du bouton, puis l'événement du div interne La fonction de gestionnaire, et enfin la fonction de gestionnaire d'événements du div externe.

Principe de la capture d'événements : 
La capture d'événements est l'opposé du bouillonnement d'événements. La capture d'événements signifie commencer à partir de l'élément racine du document et parcourir chaque élément de l'arborescence DOM jusqu'à ce qu'un événement spécifique soit déclenché.

Méthode d'implémentation :
De même, nous pouvons utiliser la méthode addEventListener pour ajouter des écouteurs d'événements aux éléments afin de réaliser la capture d'événements.
Ce qui suit est un exemple :

// HTML代码：
<div id="outer">
  <div id="inner">
    <button id="btn">按钮</button>
  </div>
</div>

// JavaScript代码：
const outer = document.querySelector('#outer');
const inner = document.querySelector('#inner');
const btn = document.querySelector('#btn');

outer.addEventListener('click', function() {
  console.log('外层div被点击！');
}, true);

inner.addEventListener('click', function() {
  console.log('内层div被点击！');
}, true);

btn.addEventListener('click', function() {
  console.log('按钮被点击！');
}, true);

Dans le code ci-dessus, lorsque nous cliquons sur le bouton, l'événement démarrera à partir de l'élément racine du document et sera déclenché étape par étape vers le bas. Le gestionnaire d'événements du div externe sera exécuté. d'abord, puis le gestionnaire d'événements du div interne sera exécuté. La fonction de gestionnaire d'événements, et enfin la fonction de gestionnaire d'événements de clic du bouton est exécutée.

Résumé : 
Le bouillonnement d'événements et la capture d'événements sont deux mécanismes différents pour gérer les événements DOM en JavaScript. Ils propagent les événements dans différentes directions le long de l'arborescence DOM. La diffusion d'événements commence à partir de l'élément déclencheur et remonte jusqu'à l'élément racine du document ; la capture d'événements commence à partir de l'élément racine du document et se propage jusqu'à l'élément déclencheur. Nous pouvons utiliser la méthode addEventListener pour ajouter un écouteur d'événement à un élément et définir s'il faut utiliser la capture d'événement ou le bouillonnement dans le troisième paramètre.

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!