Why does the event bubbling mechanism trigger twice?
Why does event bubbling happen twice in a row?
Event bubbling is an important concept in web development. It means that when an event is triggered in a nested HTML element, the event will bubble up from the innermost element to the outermost element. layer elements. This process can sometimes cause confusion. One common problem is that event bubbling occurs twice in a row.
In order to better understand why event bubbling occurs twice in a row, let's first look at a code example:
<div id="outer"> <div id="inner"> <button id="button">Click me</button> </div> </div> <script> document.getElementById('button').addEventListener('click', function() { console.log('Button clicked'); }); document.getElementById('inner').addEventListener('click', function() { console.log('Inner div clicked'); }); document.getElementById('outer').addEventListener('click', function() { console.log('Outer div clicked'); }); </script>
The above code creates a nested HTML structure that contains a The outermost <div>
element (id="outer"), a nested <div>
element (id="inner"), and an Button element (id="button").
In this code, we add a click event listener for each element to output information about the click of the corresponding element. When we click the button on the page, the output we expect is:
Button clicked Inner div clicked Outer div clicked
However, the actual output is:
Button clicked Inner div clicked Outer div clicked Inner div clicked Outer div clicked
As you can see, the event bubbling will occur twice in a row. times, causing the event handling function to be executed repeatedly.
The root cause of this problem lies in the execution order of the event bubbling phase. In the bubbling phase, the event will bubble up from the innermost element to the outer element, and then execute the event handler function of the parent element step by step. Therefore, when we click the button, the click event will first trigger the button's event handler, then bubble up to the nested <div>
element, and continue executing the element's event handler. However, since the <div>
element is also nested in the outermost <div>
element, the event will bubble up to the outermost element again, resulting in The outermost event handler function is executed again.
There are many ways to solve this problem. Let’s introduce two commonly used methods:
- Stop event bubbling:
In Calling the event.stopPropagation()
method in the event processing function can prevent further propagation of the event, that is, stop event bubbling. Modify the event handler function of the button in the above code example as follows:
document.getElementById('button').addEventListener('click', function(event) { console.log('Button clicked'); event.stopPropagation(); // 阻止事件冒泡 });
After using the event.stopPropagation()
method, the event bubbling will stop on the button element and will not propagate to the embedded element. On the nested <div>
element and the outermost <div>
element. Therefore, the event processing function will only be executed once, and the output result is:
Button clicked
- Monitoring capture phase:
In addition to the event bubbling phase, DOM events have another capture phase. The capture phase refers to the process of events propagating from the outermost element to the inner element. Using the capture phase, you can add an event listener on the outermost element, handle the event in the capture phase, and then decide whether to execute event handlers on other elements. Modify the event handler function of the outermost <div>
element in the above code example as follows:
document.getElementById('outer').addEventListener('click', function() { console.log('Outer div clicked'); }, true); // 添加 true 参数表示监听捕获阶段
By adding the parameter true
to the outermost element Event listeners can execute event processing functions during the capture phase. In this way, during the event bubbling stage, the event will not trigger the event processing function on the outermost element again, thus avoiding repeated execution.
To summarize, event bubbling will occur twice in a row because the event will bubble from the innermost element to the outermost element during the bubbling phase, and the event processing function on each element will be executed. . In order to solve this problem, we can use the event.stopPropagation()
method to prevent the event from bubbling, or process the event by listening to the capture phase to avoid repeated execution.
The above is the detailed content of Why does the event bubbling mechanism trigger twice?. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

PHP Tips: Quickly implement the function of returning to the previous page. In web development, we often encounter the need to implement the function of returning to the previous page. Such operations can improve the user experience and make it easier for users to navigate between web pages. In PHP, we can achieve this function through some simple code. This article will introduce how to quickly implement the function of returning to the previous page and provide specific PHP code examples. In PHP, we can use $_SERVER['HTTP_REFERER'] to get the URL of the previous page

How to add click event to image in Vue? Import the Vue instance. Create a Vue instance. Add images to HTML templates. Add click events using the v-on:click directive. Define the handleClick method in the Vue instance.

Use Golang to develop powerful desktop applications. With the continuous development of the Internet, people have become inseparable from various types of desktop applications. For developers, it is crucial to use efficient programming languages to develop powerful desktop applications. This article will introduce how to use Golang (Go language) to develop powerful desktop applications and provide some specific code examples. Golang is an open source programming language developed by Google. It has the characteristics of simplicity, efficiency, strong concurrency, etc., and is very suitable for

Introduction to HarmonyOS and Go language development HarmonyOS is a distributed operating system developed by Huawei, and Go is a modern programming language. The combination of the two provides a powerful solution for developing distributed applications. This article will introduce how to use Go language for development in HarmonyOS, and deepen understanding through practical cases. Installation and Setup To use Go language to develop HarmonyOS applications, you need to install GoSDK and HarmonyOSSDK first. The specific steps are as follows: #Install GoSDKgogetgithub.com/golang/go#Set PATH

Layui login page jump setting steps: Add jump code: Add judgment in the login form submit button click event, and jump to the specified page through window.location.href after successful login. Modify the form configuration: add a hidden input field to the form element of lay-filter="login", with the name "redirect" and the value being the target page address.

Answer: JavaScript provides a variety of methods for obtaining web page elements, including using ids, tag names, class names, and CSS selectors. Detailed description: getElementById(id): Get elements based on unique id. getElementsByTagName(tag): Gets the element group with the specified tag name. getElementsByClassName(class): Gets the element group with the specified class name. querySelector(selector): Use CSS selector to get the first matching element. querySelectorAll(selector): Get all matches using CSS selector

The event-driven mechanism in concurrent programming responds to external events by executing callback functions when events occur. In C++, the event-driven mechanism can be implemented with function pointers: function pointers can register callback functions to be executed when events occur. Lambda expressions can also implement event callbacks, allowing the creation of anonymous function objects. The actual case uses function pointers to implement GUI button click events, calling the callback function and printing messages when the event occurs.

Click events in JavaScript cannot be executed repeatedly because of the event bubbling mechanism. To solve this problem, you can take the following measures: Use event capture: Specify an event listener to fire before the event bubbles up. Handing over events: Use event.stopPropagation() to stop event bubbling. Use a timer: trigger the event listener again after some time.
