This paper mainly solves two problems:
What is event flow
Three stages of the DOM event stream
When I warmed up my JavaScript advanced programming, I turned to the DOM event chapter, (to tell you the truth, now you can't leave the DOM for whatever frame you're in, after all, it's the most basic element you're showing, like a human cell). Think of the DOM event flow principle, many people do not understand, only know the click Mouseout and other practical scenarios, really understand and further the front end is to must: Theory + practice parallel.
Of course, the DOM event contains a complex knowledge, so this article focuses on learning with their own difficulties encountered, DOM event flow.
FlowThe concept of flow is ubiquitous in today's JavaScript. For example, the one-way data stream in react, the stream in node, or the DOM event stream described in this article today. is a vivid manifestation of the flow. As for the specific concept of flow, we use the following explanations:
In terms of terminology, flow is an abstraction of input. In a procedural sense, a stream is a data with a direction.
In the process of browser development, the development team encountered a problem. Which part of the page has a specific event?
You can imagine a set of concentric circles drawn on a piece of paper, if you put your finger on the center of the circle, then your finger is not a circle, but all the circles on the paper. Put on the actual page is that you click on a button, in fact you also clicked the button all the parent element.
The question for the development team is, when the button is clicked, is the parent of the outermost button receive the event and execute it first, or does the concrete element receive the event and execute it first? So the concept of event flow is introduced here.
The event flow describes the order in which events are accepted from the page.
Because there are two views, there are two types of event flow, event bubbling and event capture. The current mainstream is event bubbling.
Event bubblingEvent bubbling is when the event starts, is received by the most specific element (that is, the node where the event occurred), and then propagated to the less specific node. With a chestnut, it is easy to understand.
<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Event bubbling</title></head><body> <button id="ClickMe">Click Me</button></body></html>Then we give button and it's the parent element that joins the Click event.
varbutton = document.getElementById (' ClickMe '); Button.onclick =function() {Console.log (' 1. You click Button ');}; Document.body.onclick =function() {Console.log (' 2. You click Body ');}; Document.onclick =function() {Console.log (' 3. You click Document ');}; Window.onclick =function() {Console.log (' 4. You click Window ');};Effect:
In the page shown in the code, if you click on the button, the Click event will propagate in the following order (Chrome browser):
button
body
document
window
That is, the Click event occurs first on the <button> element and then propagates upward. This is the event bubbling.
The concept of event capture is just the opposite of event bubbling. It believes that when an event occurs, the parent element should receive the event earlier, and the specific element receives the event at the end. For example, just the demo, if the event is captured, the sequence of events will be like this:
window
document
body
button
Of course, because of the changing times, the event bubbled up a better way. So use event bubbling with confidence, and use event capture for special needs.
Dom Event FlowThe DOM event flow consists of three stages.
Event Capture Phase
In the target phase
Event bubbling Phase
(Image from the network, if infringement please inform):
1. Event Capture PhaseThat is, when an event occurs, the first occurrence is event capture, which provides an opportunity for the parent element to intercept the event.
For example, I changed the window click event in the above demo to use event capture mode. (AddEventListener the last argument, true means use event capture mode , false means use event bubbling mode.) Do not understand can go to learn about the use of the AddEventListener function)
window.addEventListener(‘click‘function() { console.log(‘4. You click window‘true);
At this point, the effect of clicking on the button is like this.
As you can see, the Click event is first intercepted by the parent element, and the function only works during the event capture phase.
In the target and event bubbling phaseEvents occur on specific elements and are considered part of the bubbling phase when they arrive at specific elements. The bubbling phase then occurs and the event begins to bubble.
Block event bubblingEvent bubbling is a process that can be blocked. Prevent events from bubbling and causing unnecessary errors and problems.
This method is:stopPropagation()We button made some modifications to the Click event.
button.addEventListener(‘click‘, function(event) { // event为事件对象 console.log(‘1. You click Button‘); event.stopPropagation(); console.log(‘Stop Propagation!‘);}, false);After clicking, the effect is as follows:
It is not difficult to see that the event stops bubbling after reaching the specific element. But does not affect the parent element's event capture.
Summary and ImpressionsEvent Flow: Describes the order in which events are accepted from the page. There are two types of event bubbling and event capture. Three phases of the DOM event stream:
event capture phase
in target phase
event bubbling stage
In the course of learning DOM events, we learned about the three stages of DOM events, and also know what the event bubbling is for and how to block it. With the previous study of the two-fork tree related knowledge, benefited greatly.
About DOM event bubbling, capturing DOM events three stages
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
