interface Web
js tutoriel
Pourquoi les événements bouillonnent-ils et se déclenchent-ils plusieurs fois ?
Pourquoi les événements bouillonnent-ils et se déclenchent-ils plusieurs fois ?
Pourquoi l'événement bouillonnant se déclenche-t-il deux fois ?
Le bouillonnement d'événements est un phénomène courant dans le développement Web. Cela signifie que lorsqu'un événement sur un élément est déclenché, l'événement bouillonne à partir de l'élément, déclenchant à son tour le même événement sur son élément parent. Cependant, nous constatons parfois qu’un événement se déclenche deux fois au cours du processus de bouillonnement. Afin de mieux comprendre pourquoi cela se produit, nous devons commencer par le principe du bouillonnement d’événements et l’analyser avec des exemples de code spécifiques.
Le principe du bouillonnement d'événements est basé sur l'arborescence DOM. Dans un document HTML, tous les éléments sont organisés dans une arborescence selon leurs relations imbriquées. Lorsqu'un événement est déclenché, l'événement remonte de l'élément où l'événement s'est produit, le long de son élément parent, jusqu'à ce qu'il atteigne l'élément racine. Pendant le processus de bouillonnement, l'événement déclenchera tour à tour le même gestionnaire d'événements sur chaque élément parent. L'avantage de cette conception est que le traitement de la délégation d'événements peut être facilement effectué et qu'un flux d'événements naturel peut être obtenu.
Cependant, le bouillonnement d'événements sera déclenché deux fois, principalement en raison d'une mauvaise liaison de la fonction de traitement des événements ou d'un mécanisme de prévention des événements imparfait. Regardons un exemple de code concret :
<!DOCTYPE html>
<html>
<head>
<title>事件冒泡示例</title>
</head>
<body>
<div id="outer">
<div id="inner">
<button id="btn">Click me!</button>
</div>
</div>
<script>
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var btn = document.getElementById('btn');
outer.addEventListener('click', function() {
console.log('Outer clicked!');
});
inner.addEventListener('click', function() {
console.log('Inner clicked!');
});
btn.addEventListener('click', function() {
console.log('Button clicked!');
event.stopPropagation();
});
</script>
</body>
</html>Dans cet exemple, nous avons un élément div avec deux niveaux imbriqués et un bouton imbriqué dans le div le plus interne. Nous lions un gestionnaire d'événements de clic à chaque élément div et bouton, et envoyons les informations correspondantes à la console.
Lorsque nous cliquons sur le bouton, nous pouvons nous attendre à ce que « Bouton cliqué ! » ne soit affiché qu'une seule fois, mais en fait, nous constaterons qu'il est affiché deux fois. En effet, pendant le processus de propagation de l'événement, l'événement déclenchera tour à tour le gestionnaire d'événements sur chaque élément parent. Autrement dit, lorsque l'utilisateur clique sur le bouton, le gestionnaire d'événements click sur le bouton sera déclenché en premier, puis l'élément div le plus interne. sera déclenché à son tour. Et la fonction de gestionnaire d'événements sur l'élément div le plus externe. Puisque nous avons appelé la méthode event.stopPropagation() dans le gestionnaire d'événements du bouton, cette méthode empêchera l'événement de bouillonner. Cependant, l'appel de cette méthode à l'intérieur du gestionnaire d'événements n'empêchera pas l'exécution des gestionnaires d'événements suivants, de sorte que le gestionnaire d'événements sur l'élément div le plus interne sera toujours déclenché une fois. event.stopPropagation()方法，这个方法会阻止事件继续冒泡上去。然而，在事件处理函数内部调用该方法并不会阻止之后的事件处理函数的执行，所以最内层div元素上的事件处理函数还是会被触发一次。
要解决这个问题，我们可以在按钮的事件处理函数中使用event.stopImmediatePropagation()方法，该方法除了阻止事件冒泡，还能够阻止后续事件处理函数的执行。修改代码如下：
btn.addEventListener('click', function(event) {
console.log('Button clicked!');
event.stopImmediatePropagation();
});这样，当我们点击按钮时，就只会输出一次"Button clicked!"。
总结来说，事件冒泡会出现两次触发的情况，主要是由于事件处理函数的绑定方式不当或者事件阻止冒泡的机制不完善。我们需要正确地使用event.stopPropagation()和event.stopImmediatePropagation()
event.stopImmediatePropagation() dans la fonction de traitement d'événement du bouton. En plus d'empêcher l'événement de bouillonner, cette méthode peut également empêcher l'exécution d'un événement ultérieur. fonctions de traitement. Modifiez le code comme suit : 🎜rrreee🎜De cette façon, lorsque nous cliquons sur le bouton, "Bouton cliqué !" ne sera affiché qu'une seule fois. 🎜🎜En résumé, le bouillonnement d'événements sera déclenché deux fois, principalement en raison d'une mauvaise liaison de la fonction de traitement des événements ou d'un mécanisme de prévention des événements imparfait. Nous devons utiliser correctement les méthodes event.stopPropagation() et event.stopImmediatePropagation() pour contrôler le bouillonnement et l'exécution des événements. Ce n'est qu'en comprenant les principes et les mécanismes du bouillonnement d'événements que nous pourrons mieux gérer les problèmes causés par le bouillonnement d'événements et améliorer l'expérience utilisateur des applications Web. 🎜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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comprendre le mécanisme de bouillonnement d'événements : Pourquoi un clic sur un élément enfant affecte-t-il l'événement de l'élément parent ?
Jan 13, 2024 pm 02:55 PM
Comprendre le bouillonnement d'événements : pourquoi un clic sur un élément enfant déclenche-t-il un événement sur l'élément parent ? Le bouillonnement d'événements signifie que dans une structure d'éléments imbriqués, lorsqu'un élément enfant déclenche un événement, l'événement sera transmis à l'élément parent couche par couche comme un bouillonnement, jusqu'à l'élément parent le plus à l'extérieur. Ce mécanisme permet aux événements sur les éléments enfants de se propager dans toute l'arborescence des éléments et de déclencher tour à tour tous les éléments associés. Pour mieux comprendre le bouillonnement d'événements, examinons un exemple de code spécifique. Code HTML : <divid="parent&q
Raisons et solutions de l'échec de jQuery .val()
Feb 20, 2024 am 09:06 AM
Titre : Raisons et solutions de l'échec de jQuery.val() Dans le développement front-end, jQuery est souvent utilisé pour faire fonctionner des éléments DOM. La méthode .val() est largement utilisée pour obtenir et définir la valeur des éléments de formulaire. Cependant, nous rencontrons parfois des situations où la méthode .val() échoue, entraînant l'incapacité d'obtenir ou de définir correctement la valeur de l'élément de formulaire. Cet article explorera les causes de l'échec de .val(), fournira les solutions correspondantes et joindra des exemples de code spécifiques. 1.Méthode d'analyse des causes.val()
Pourquoi le bouillonnement d'événements se déclenche-t-il deux fois ?
Feb 22, 2024 am 09:06 AM
Pourquoi le bouillonnement d'événements se déclenche-t-il deux fois ? Le bouillonnement d'événement (Event Bubbling) signifie que dans le DOM, lorsqu'un élément déclenche un événement (comme un événement de clic), l'événement bouillonne de l'élément vers l'élément parent jusqu'à ce qu'il bouillonne vers l'objet document de niveau supérieur. La diffusion d'événements fait partie du modèle d'événement DOM, qui permet aux développeurs de lier des écouteurs d'événements aux éléments parents, de sorte que lorsque des éléments enfants déclenchent des événements, ceux-ci puissent être capturés et traités via le mécanisme de diffusion. Cependant, les développeurs rencontrent parfois des événements qui se déclenchent deux fois.
Pourquoi l'événement click dans js ne peut-il pas être exécuté à plusieurs reprises ?
May 07, 2024 pm 06:36 PM
Les événements de clic en JavaScript ne peuvent pas être exécutés à plusieurs reprises en raison du mécanisme de propagation des événements. Pour résoudre ce problème, vous pouvez prendre les mesures suivantes : Utiliser la capture d'événement : Spécifiez un écouteur d'événement à déclencher avant que l'événement ne se déclenche. Remise des événements : utilisez event.stopPropagation() pour arrêter le bouillonnement des événements. Utilisez une minuterie : déclenchez à nouveau l'écouteur d'événements après un certain temps.
Pour quels scénarios les modificateurs d'événements dans vue peuvent-ils être utilisés ?
May 09, 2024 pm 02:33 PM
Les modificateurs d'événements Vue.js sont utilisés pour ajouter des comportements spécifiques, notamment : empêcher le comportement par défaut (.prevent) arrêter le bouillonnement d'événements (.stop) événement ponctuel (.once) capturer l'événement (.capture) écouter passivement les événements (.passive) Adaptatif modificateur (.self)Modificateur de touche (.key)
Pourquoi le mécanisme de bouillonnement d'événements se déclenche-t-il deux fois ?
Feb 25, 2024 am 09:24 AM
Pourquoi le bouillonnement d’événements se produit-il deux fois de suite ? La diffusion d'événements est un concept important dans le développement Web. Cela signifie que lorsqu'un événement est déclenché dans un élément HTML imbriqué, l'événement remonte de l'élément le plus interne vers l'élément le plus externe. Ce processus peut parfois prêter à confusion. Un problème courant est que la diffusion d'événements se produit deux fois de suite. Afin de mieux comprendre pourquoi le bouillonnement d'événements se produit deux fois de suite, regardons d'abord un exemple de code :
Quels événements JS ne bouillonnent pas ?
Feb 19, 2024 pm 09:56 PM
Quelles sont les situations dans les événements JS qui ne bouillonneront pas ? Le bouillonnement d'événements (Event Bubbling) signifie qu'après le déclenchement d'un événement sur un certain élément, l'événement sera transmis vers le haut le long de l'arborescence DOM, de l'élément le plus interne à l'élément le plus externe. Cette méthode de transmission est appelée bouillonnement d'événements. Cependant, tous les événements ne peuvent pas surgir. Il existe des cas particuliers dans lesquels les événements ne surgissent pas. Cet article présentera les situations en JavaScript dans lesquelles les événements ne bouillonneront pas. 1. Utilisez stopPropagati
Quels sont les moyens courants pour éviter les événements bouillonnants ?
Feb 19, 2024 pm 10:25 PM
Quelles sont les commandes couramment utilisées pour empêcher les événements bouillonnants ? Dans le développement Web, nous rencontrons souvent des situations où nous devons gérer le bouillonnement d’événements. Lorsqu'un événement est déclenché sur un élément, tel qu'un événement de clic, son élément parent déclenchera également le même événement. Ce comportement de transmission d'événements est appelé bouillonnement d'événements. Parfois, nous souhaitons empêcher un événement de se produire, afin que l'événement ne se déclenche que sur l'élément actuel et l'empêche d'être transmis aux éléments supérieurs. Pour y parvenir, nous pouvons utiliser certaines directives courantes qui empêchent les événements de bouillonnement. event.stopPropa
