Qu'est-ce que l'événement bouillonne et capture dans le DOM?
事件捕获和冒泡是DOM中事件传播的两个阶段，捕获是从顶层向下到目标元素，冒泡是从目标元素向上传播到顶层。1. 事件捕获通过addEventListener的useCapture参数设为true实现；2. 事件冒泡是默认行为，useCapture设为false或省略；3. 可使用event.stopPropagation()阻止事件传播；4. 冒泡支持事件委托，提高动态内容处理效率；5. 捕获可用于提前拦截事件，如日志记录或错误处理。了解这两个阶段有助于精确控制JavaScript响应用户操作的时机和方式。
So you've heard about event bubbling and capturing in the DOM, but what do they really mean? In short, they're two phases of how events travel through the DOM tree when something happens — like a click or keypress. Understanding them helps you control exactly when and where your JavaScript code responds to user actions.
What’s the difference between bubbling and capturing?
In simple terms:
-
Event capturing is the phase where the event goes from the top of the DOM (like
windowordocument) down to the target element. - Event bubbling is the opposite: the event starts at the target element and then "bubbles up" through its parent elements to the top of the document.
Most people are familiar with bubbling because that's usually the default behavior. For example, if you have a <button> inside a <div>, and both have click handlers, clicking the button will first trigger its handler, then the div's, and so on.
How do I use capturing or bubbling in practice?
When you add an event listener using addEventListener, you can specify whether it should run during the capturing phase or the bubbling phase.
Here's the syntax:
element.addEventListener('click', function, useCapture);- If
useCaptureistrue, the handler runs during the capturing phase. - If
false(or omitted), it runs during bubbling.
Let’s say you have this structure:
<div id="outer"> <button id="inner">Click me</button> </div>
And this JS:
document.getElementById('outer').addEventListener('click', () => {
console.log('Outer clicked - bubbling');
}, false);
document.getElementById('outer').addEventListener('click', () => {
console.log('Outer clicked - capturing');
}, true);When you click the button, the output would be:
- “Outer clicked - capturing” (because capturing happens before bubbling)
- Then whatever handler is on the button itself
- Then “Outer clicked - bubbling”
This gives you fine-grained control over the order of execution.
When would I actually need to care about this?
You might not always need to think about capturing or bubbling, but here are a few common situations where it matters:
Stopping event propagation: Sometimes you don’t want an event to bubble up. For example, if you have a dropdown menu and clicking inside it shouldn't close the menu. Use
event.stopPropagation()to stop it from going further.Delegating events: Event bubbling is the reason event delegation works. Instead of attaching a handler to every list item, you can attach one to their container and let events bubble up. This is efficient for dynamic content.
Capturing for early interception: Rarely used, but useful in some edge cases. For instance, logging all clicks before they reach the target, or handling errors very early.
A few things to watch out for
-
stopPropagation()affects both phases unless called during capturing. - Some events don’t bubble (like
focus), so check documentation. - Bubbling doesn’t go beyond
window; only certain events make it all the way up. - The third parameter (
useCapture) inaddEventListeneris easy to forget — but powerful when needed.
基本上就这些.
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
Undress AI Tool
Images de déshabillage gratuites
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.
Stock Market GPT
Recherche d'investissement basée sur l'IA pour des décisions plus intelligentes
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)
JavaScript réalise l'effet de commutation d'image click-through: tutoriel professionnel
Sep 18, 2025 pm 01:03 PM
Cet article présentera comment utiliser JavaScript pour réaliser l'effet de cliquer sur les images. L'idée principale est d'utiliser l'attribut Data- * de HTML5 pour stocker le chemin d'image alternatif et écouter des événements de clic via JavaScript, changez dynamiquement les attributs SRC, réalisant ainsi la commutation d'image. Cet article fournira des exemples de code et des explications détaillés pour vous aider à comprendre et à maîtriser cet effet interactif couramment utilisé.
Comment obtenir l'emplacement de l'utilisateur avec l'API Geolocation en JavaScript?
Sep 21, 2025 am 06:19 AM
Tout d'abord, vérifiez si le navigateur prend en charge GeolocationAPI. Si vous êtes pris en charge, appelez getCurrentPosition () pour obtenir les coordonnées de l'emplacement actuelles de l'utilisateur et obtenir les valeurs de latitude et de longitude grâce à des rappels réussis. Dans le même temps, fournissez des exceptions de traitement des rappels d'erreur tels que l'autorisation de déni, l'indisponibilité de l'emplacement ou du délai d'attente. Vous pouvez également transmettre des options de configuration pour activer une précision élevée, définir le délai d'expiration et la période de validité du cache. L'ensemble du processus nécessite l'autorisation de l'utilisateur et la gestion des erreurs correspondante.
Comment créer un intervalle répétitif avec SetInterval dans JavaScript
Sep 21, 2025 am 05:31 AM
Pour créer un intervalle de répétition dans JavaScript, vous devez utiliser la fonction setInterval (), qui exécutera à plusieurs reprises des fonctions ou des blocs de code à des intervalles de millisecondes spécifiés. Par exemple, setInterval (() => {Console.log ("Exécuter toutes les 2 secondes");}, 2000) publiera un message toutes les 2 secondes jusqu'à ce qu'il soit effacé par ClearInterval (Interpalid). Il peut être utilisé dans les applications réelles pour mettre à jour les horloges, les serveurs de sondage, etc., mais faire attention à la limite de retard minimum et à l'impact du temps d'exécution de la fonction, et effacez l'intervalle dans le temps lorsqu'il n'est plus nécessaire pour éviter les fuites de mémoire. Surtout avant la désinstallation des composants ou la fermeture des pages, assurez-vous que
L'API de composition Nuxt 3 a expliqué
Sep 20, 2025 am 03:00 AM
L'utilisation du noyau de l'API de composition de Nuxt3 comprend: 1. DefinePageMeta est utilisée pour définir les méta-informations de la page, telles que le titre, la mise en page et le middleware, qui doivent être appelées directement et ne peuvent pas être placées dans des déclarations conditionnelles; 2. Usyhead est utilisé pour gérer les balises d'en-tête de page, prend en charge les mises à jour statiques et réactives et doit coopérer avec DefinePageMeta pour obtenir l'optimisation du référencement; 3. USEASYNCDATA est utilisé pour obtenir en toute sécurité des données asynchrones, gérer automatiquement l'état de chargement et d'erreur et prend en charge le contrôle d'acquisition de données du serveur et du client; 4. UseFetch est une encapsulation de usEasyncdata et $ fetch, qui dépente automatiquement la clé de demande pour éviter les demandes en double
Pièges et solutions communes pour l'accès à l'élément DOM en JavaScript
Sep 15, 2025 pm 01:24 PM
Cet article vise à résoudre le problème du retour null lors de l'obtention d'éléments DOM via document.getElementById () dans JavaScript. Le noyau consiste à comprendre le synchronisation d'exécution du script et l'état de l'analyse DOM. En plaçant correctement la balise ou en utilisant l'événement téléchargé DomContent, vous pouvez vous assurer que l'élément est à nouveau tenté lorsqu'il est disponible, en évitant efficacement de telles erreurs.
Formatage des nombres en javascript: utilisez la méthode TofixEd () pour conserver les décimales fixes
Sep 16, 2025 am 11:57 AM
Ce tutoriel explique en détail comment formater les numéros en chaînes avec deux décimales fixes en JavaScript, même les entiers peuvent être affichés sous la forme de "# .00". Nous nous concentrerons sur l'utilisation de la méthode numéro.prototype.tofixed (), y compris sa syntaxe, sa fonctionnalité, son exemple de code et des points clés à noter, comme son type de retour étant toujours une chaîne.
Comment copier du texte dans le presse-papiers en javascript?
Sep 18, 2025 am 03:50 AM
Utilisez la méthode WriteText de ClipboardAPI pour copier du texte dans le presse-papiers, il doit être appelé dans le contexte de sécurité et l'interaction utilisateur, prend en charge les navigateurs modernes et l'ancienne version peut être dégradée avec EXECCOMAND.
Comment créer une chaîne multi-lignes en JavaScript?
Sep 20, 2025 am 06:11 AM
ThebestatorreatEAmulti-linestringinjavascriptsisingstingTemplatalalswithbackticks, qui sepresereBreakenexactlyAswritten.
