Web Front-end
JS Tutorial
DOM event stage and event capture and event bubbling execution sequence (detailed graphic and text explanation)_jquery
DOM event stage and event capture and event bubbling execution sequence (detailed graphic and text explanation)_jquery
As the saying goes, a good memory is not as good as a bad pen. If you don’t thoroughly understand so many technical articles, it will be easy to forget the technical points quickly. Below are the technical articles that the editor usually browses, and the notes I compiled to share with you.
During the development process, we all hope to use other people’s mature frameworks, because standing on the shoulders of giants will greatly improve the efficiency of our development. However, we should also and must understand its basic principles. For example, for DOM events, the jquery framework helps us encapsulate and abstract the different behaviors of various browsers, bringing great convenience to event processing. However, browsers are gradually becoming unified and standardized, and we can use official standardized interfaces more safely. Because only by winning the hearts and minds of many developers can the browser go further. Just like when we use a lower version browser to open certain pages, we will be told to use an advanced browser such as Chrome to access it. But this is a revolutionary process. In order to make our webPage better serve more people, we now have to be better compatible with these historical issues. To be compatible, in addition to relying on the framework, we must understand its basic principles.
Three stages of DOM events
When a DOM event is triggered, it is not simply triggered once on the object itself, but will go through three different stages:
1. Capture phase : First, go from the root node document of the document to the event trigger object, and capture the event object from the outside in;
2. Target stage : Arrive at the target event location (where the incident occurred) and trigger the event;
3. Bubble stage : Then trace back from the target event location to the root node of the document, and bubble the event object from the inside out.
Citation source: http://www.w3.org/TR/DOM-Level-3-Events/#event-flow
The order of event capture and event bubbling is obvious.
Experimental part
Open the online editor: http://jsbin.com/goqede/edit?html,css,js,output
The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-">
<title>Document</title>
<style>
#outer{
text-align: center;
width: px;
height: px;
background-color: #ccc;
margin: auto;
}
#middle{
width: px;
height: px;
background-color: #f;
margin: auto;
}
#inner{
width: px;
height: px;
background-color: #f;
margin: auto;
border-rad
}
</style>
</head>
<body>
<div id='outer'>
<span>outer</span>
<div id='middle'>
<span>middle</span>
<div id='inner'>
<span>inner</span>
</div>
</div>
</div>
<script>
function $(element){
return document.getElementById(element);
}
function on(element,event_name,handler,use_capture){
if(addEventListener){
$(element).addEventListener(event_name,handler,use_capture);
}
else{
$(element).attachEvent('on'+event_name,handler);
}
}
on("outer","click",o_click_c,true);
on("middle","click",m_click_c,true);
on("inner","click",i_click_c,true);
on("outer","click",o_click_b,false);
on("middle","click",m_click_b,false);
on("inner","click",i_click_b,false);
function o_click_c(){
console.log("outer_捕获");
alert("outer_捕获");
}
function m_click_c(){
console.log("middle_捕获")
alert("middle_捕获");
}
function i_click_c(){
console.log("inner_捕获")
alert("inner_捕获");
}
function o_click_b(){
console.log("outer_冒泡")
alert("outer_冒泡");
}
function m_click_b(){
console.log("middle_冒泡")
alert("middle_冒泡");
}
function i_click_b(){
console.log("inner_冒泡")
alert("inner_冒泡");
}
</script>
</body>
</html>When we click inner the result is:
outer_capture
middle_capture
inner_capture
inner_bubble
middle_bubble
outer_bubble
It can be seen that the event is captured from the outside inward first, until the event element is reached, and then bubbles up to the root node from the inside out
tips:
When an event is triggered in the target stage, it will be executed according to the order of event registration. The order of registration in the other two stages does not affect the order of event execution. That is to say, if both bubbling events and capture events are registered here, they will be executed in the order of registration.
For example, when I click inner, according to the above order, the answer is indeed the answer we want:
,
When my event registration sequence is changed to the following code:
When we click outer:
When we click on middle:
When we click inner:
It can be seen that the order of event execution on the event element in the target stage is determined by the order of event registration
The above content is the DOM event stage and the execution sequence of event capture and event bubbling in this article (detailed pictures and texts). I hope it will be helpful to everyone's future work and study.
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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
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
1664
14
1423
52
1321
25
1269
29
1249
24
Master the common event bubbling mechanism in JavaScript
Feb 19, 2024 pm 04:43 PM
Common bubbling events in JavaScript: To master the bubbling characteristics of common events, specific code examples are required. Introduction: In JavaScript, event bubbling means that the event will start from the element with the deepest nesting level and propagate to the outer element until it propagates to The outermost parent element. Understanding and mastering common bubbling events can help us better handle user interaction and event handling. This article will introduce some common bubbling events and provide specific code examples to help readers better understand. 1. Click event (click
Which JS events are not propagated upward?
Feb 19, 2024 am 08:17 AM
Which JS events will not bubble? In JavaScript, event bubbling means that when an element triggers an event, the event will bubble up to higher-level elements until it bubbles to the document root node. The event handlers are then executed in the order they bubble up. However, not all events bubble up. Some events will only execute the event handler on the target element after being triggered, without bubbling up to higher-level elements. Here are some common events that do not bubble: focus and blur events:
Why does the same event trigger bubbling twice?
Feb 19, 2024 pm 10:34 PM
Why does the same bubbling event happen twice? Event bubbling is a common event delivery mechanism in browsers. When an element triggers an event, the event will be passed from the triggered element to the upper elements in sequence until it is passed to the root element of the document. This process is like bubbles bubbling in water, so it is called event bubbling. However, sometimes we find that the same bubbling event occurs twice. Why is this? There are two main reasons: event registration and event processing. First, we need to make it clear that the event
Capture first or bubble first? Analyze the advantages and disadvantages of event processes
Feb 21, 2024 pm 02:36 PM
Capture first or bubble first? Analyzing the advantages and disadvantages of event process Event process is an important concept in web development. It describes the process of events from occurrence to processing. There are two main process models when handling events: capture then bubble and bubble then capture. These two models have their own advantages and disadvantages in different scenarios, and you need to choose the appropriate model based on the actual situation. Capturing first and then bubbling means that the event capturing phase is executed before the event bubbling phase. The event capture phase starts from the root node of the event target and passes down step by step until it reaches the target element.
The bubbling mechanism of click events and its impact on web page interaction
Jan 13, 2024 pm 02:34 PM
The role of click event bubbling and its impact on web page interaction In web development, events are the key to realizing interaction and responding to user operations. Among them, event bubbling is a common event mechanism that allows events in a nested element hierarchy to be responded to by multiple elements at the same time. This article will explain in detail the role of click event bubbling, its impact on web page interaction, and provide some specific code examples. 1. The concept of click event bubbling Click event bubbling (ClickEvent Bubbling) refers to when an element
Exception handling: How to catch and handle exceptions in PHP?
Dec 18, 2023 pm 12:52 PM
Exception handling: How to catch and handle exceptions in PHP? In PHP development, exception handling is a very important part. When an unexpected situation or error occurs in the program, we need to ensure the normal operation of the program by catching and handling exceptions. PHP provides a set of exception handling mechanisms. This article will introduce how to catch and handle exceptions in PHP and provide specific code examples. 1. The basic concept of exceptions in PHP. In PHP, an exception refers to an abnormal situation that occurs during the running of the program, such as errors, warnings, and fatal errors.
How to take a screenshot on MacBook Pro
Jul 19, 2023 pm 07:53 PM
This guide will show you what you have to do to take a screenshot on your MacBook Pro. MacBooks are known for their sleek design and powerful performance, but these powerful laptops come with a number of convenient features that are often overlooked. One of the features is a built-in tool for capturing screenshots. This article will guide you step by step on how to take a screenshot on MacBook Pro, whether you want to capture the entire screen or just a specific part of the screen. What is a screenshot? A screenshot, also called a screenshot, is a digital image taken by a computer or mobile device to record an item visible on the screen. Screenshots are typically used to create a record of images or text that you can't easily save as a file, share a screen view with others, or create guides and tutorials, like
Explore click event bubbling and master the key principles of front-end development
Jan 13, 2024 am 10:56 AM
Learn click event bubbling and master key concepts in front-end development. Specific code examples are required. Front-end development is an important field in today's Internet era, and event bubbling is one of the key concepts in front-end development. Understanding and mastering event bubbling is critical to writing efficient front-end code. This article will introduce what event bubbling is and how to use the concept of event bubbling in front-end development. 1. What is event bubbling? Event bubbling means that when an event on an element is triggered, it will start from the innermost element first, and then proceed to the parent element step by step.
