Home > Developer > JavaScript
There are three stages in the DOM event flow: The event capture phase, the target stage, and the event bubbling phase.
Event capture (dubbed bubbling): The popular understanding is that when a mouse clicks or triggers a DOM event, the browser will propagate the event from the root node, from outside to inside , i.e. click on the child element, If the parent element registers the corresponding event through event capture, the parent element's bound event is triggered first.
Event bubbling (capturing): Contrary to event capture, event bubbling order is propagated from inside to outside, until the root node.
Whether it is event capture or event bubbling, they all have a common behavior, that is, event propagation , it is like a leader, only through the leader can be tied to the wire on the Firecracker (event listener) detonated, imagine, if the lead does not lead to fire, then the firecrackers only a ring!!!
The order in which the DOM standard event flow is triggered is to capture and then bubble , that is, when a DOM event is triggered, an event is captured, and event bubbling is propagated through event propagation after the event source is captured. Different browsers have different implementations of this, IE10 and the following do not support capture-type events, so there is an event capture phase, IE11, Chrome, Firefox, Safari and other browsers are also present.
When it comes to event bubbling and capturing, we have to mention two methods for event binding AddEventListener, Attachevent. Of course there are other ways to bind the event here without introducing it.
AddEventListener (event, listener, Usecapture)
• Parameter definition:event---(events name, such as Click, without on), listener---event listener function,usecapture--- event capture with event captures,
The default is false, which means event bubbling is used
AddEventListener is supported in browsers such as IE11, Chrome, Firefox, and Safari.
Attachevent (Event,listener)
· The parameter definition is: Event---(events name, such as OnClick, with on), Listener---event listener function.
Attachevent is mainly used in IE browser, and only in IE10 and the following only support, IE11 has been abolished this method (Microsoft is quite play gooseberry, slowly to the standard).
Having said a whole bunch of definitions, the following two methods are used to explain the difference between event capture and event bubbling behavior.
Event bubbling
Chestnut 1:
1 <Htmllang= "ZH-CN" >
<meta= "Content-type"content= "text/html; Charset=utf-8" >
<TITLE>JS Event Mechanism </title>
<style> #parent {width:200px;height:200px;text-align:center;line-height:3;background:green;} #child {width:100px;height:100px;margin:0 auto;background:orange;}
</style
<body>
<div ID= "Parent" >parent element <div ID= "Child"child elements ></div></div>
<script type= "Text/javascript" >
varparent=document.getelementbyid ("parent");
varchild= "Child");
Document.body.addEventListener ("click" Function (e) {
Console.log ("Click-body"); },false);
Parent.addeventlistener ("click" Function (e) {
Console.log ("Click-parent");
},false);
Child.addeventlistener ("click" Function (e) {
Console.log ("Click-child"); },false);
</script>
</body>
Using the "AddEventListener" method to register the click event with the DOM element in event bubbling mode, what happens when I click on the child element? If you know something about event bubbling, then you must be aware that the code above will output the order, yes, as shown in:
The event firing order is from the inside out, this is the event bubbling, although only click on the child element, but its parent element will also trigger the corresponding event, in fact, this is reasonable, because the child element in the parent element, click on the child element is equivalent to a disguised click on the parent element, so understand it?
Here are some students may want to ask, if you click on the child elements do not want to trigger the parent element of the event? Certainly, that is to stop the event spread---event.stoppropagation;
Modify the code of Chestnut 1 to add a stop event propagation action in the listener function of the child element, chestnut 2
Child.addeventlistener ("click", Function (e) {console.log ("Click-child"); e.stoppropagation;},false);When the child element is clicked, only the child element's message is ejected, and the parent element's event is not triggered because the event has stopped propagating and the bubbling phase is stopped.
Event bubbling is almost over, don't worry, the catch hasn't been said yet!
Event capture
Chestnut 3, modify the code in Chestnut 1, register a capture event for the parent element, as follows
Varparent = document.getElementById ("parent"); Varchild = document.getElementById ("Child"); Document.body.addEventListener ("click", Function (e) {console.log ("click-body");},false); Parent.addeventlistener ("click", Function (e) {console.log ("Click-parent---event propagation");},false); New event capture event code Parent.addeventlistener ("click", Function (e) {console.log ("click-parent--event capture");},true); Child.addeventlistener ("click", Function (e) {console.log ("Click-child");},false);If you see what I said earlier, you know the order of the chestnut output.
The parent element registers the click event through an event capture, so it is triggered during the event capture phase, then to the target stage, the event source, then the event propagates, and the parent also bubbles up the Click event, so the bubbling event is triggered and finally to the root node. This is the entire event flow.
Event bubbling, event capture, event propagation are described above, and the following is a list of delegates implemented with the above three knowledge points
The delegate has been implemented in jquery, that is, through the $ (selector). On (Event,childselector,data,function,map) Implementation of the delegate, which is typically used for dynamically generated elements, Of course, jquery is also through the original sound JS to achieve, below a simple chestnut, through the JS implementation through the parent element to the child element Register Click event
Varparent = document.getElementById ("parent"); Varchild = document.getElementById ("Child"); Parent.onclick=function (e) {if (e.target.id = = "Child") {Console.log ("You clicked on the child Element")}}Although there is no direct only child element to register the click event, a prompt message pops up when the child element is clicked.
To here you do not have JS of the event mechanism has a certain understanding of it? Feel helpful to look at the following small yellow face, you know Oh!
JavaScript details the bubbling, capturing, spreading, and entrusting of event mechanisms.
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
