Cas d'application pratiques de bouillonnement d'événements et de capture d'événements dans le développement front-end

Cas d'application du bouillonnement d'événements et de la capture d'événements dans le développement front-end

Le bouillonnement d'événements et la capture d'événements sont deux mécanismes de diffusion d'événements qui sont souvent utilisés dans le développement front-end. En comprenant et en appliquant ces deux mécanismes, nous pouvons gérer les comportements interactifs dans la page de manière plus flexible et améliorer l'expérience utilisateur. Cet article présentera les concepts de bouillonnement d'événements et de capture d'événements, et les combinera avec des exemples de code spécifiques pour démontrer leurs cas d'application dans le développement front-end.

1. Le concept de bouillonnement d'événement et de capture d'événement

1. Bubbling d'événement

Le bouillonnement d'événement signifie qu'après le déclenchement d'un événement d'un élément, l'événement bouillonnera et le transmettra couche par couche à l'élément parent, jusqu'à ce qu'il soit transmis à l'élément racine du document (document). En d'autres termes, si un élément déclenche un événement, l'événement sera traité dans l'élément parent de l'élément, l'élément parent de l'élément parent et jusqu'à l'élément racine du document.

2. Capture d'événements

La capture d'événements est tout le contraire du bouillonnement d'événements. Elle fait référence à la capture d'événements à partir de l'élément racine du document et en descendant jusqu'à l'élément qui déclenche l'événement. En d'autres termes, lorsqu'un élément déclenche un événement, l'événement sera capturé à partir de l'élément racine du document puis transmis au niveau où se trouve l'élément.

2. Cas d'application de bouillonnement d'événements et de capture d'événements

1. Délégation d'événement

La délégation d'événement est un événement qui délègue des événements à ses éléments descendants en liant un écouteur d'événement à l'élément parent. En liant les écouteurs d'événements aux éléments parents, nous n'avons pas besoin d'ajouter des écouteurs distincts pour chaque élément descendant, améliorant ainsi les performances et la maintenabilité du code. Grâce au mécanisme de diffusion d'événements, nous pouvons intercepter tous les événements déclenchés et effectuer un traitement spécifique basé sur différentes sources de déclenchement.

La structure HTML est la suivante :

 按钮1 按钮2 按钮3 

Le code JavaScript est le suivant :

var parent = document.getElementById('parent'); parent.addEventListener('click', function(e) { if (e.target.nodeName === 'BUTTON') { console.log('你点击了按钮', e.target.innerHTML); } });

Dans le code ci-dessus, nous lions l'événementclickà l'élément parent#parent Listener, lorsque vous cliquez sur le bouton, l'événement remontera jusqu'à l'élément parent et déclenchera la fonction de rappel de l'événement click. En utilisant l'attributtargetde l'objet événement (e), nous pouvons obtenir l'élément source du déclencheur et le traiter en conséquence.#parent绑定了click事件监听器，当点击按钮时，事件将冒泡至父元素，并触发click事件的回调函数。利用事件对象（e）的target属性，我们可以获取到触发源元素，并进行相应的处理。

 
 
 按钮 
 

var container = document.getElementById('container'); container.addEventListener('click', function(e) { if (e.target.nodeName === 'BUTTON') { console.log('你点击了按钮'); e.stopPropagation(); } });