Home > Developer > Web Develop
In JS, the default execution time of the bound event is performed in the bubbling phase, not during the capture phase (important), which is why when both the parent class and the child class are bound to an event, the child class bound event is called before the event of the parent class is called. Look directly at the following example
<!Doctype HTML><HTML><Head> <MetaCharSet= "Utf-8"> <title></title> <styletype= "Text/css"> *{margin:0;padding:0;} </style></Head><Body><DivID= "Id1"style= "height:400px; border:1px solid #000; "> <DivID= "Id2"style= "height:200px; border:1px solid #000; "> <DivID= "ID3"style= "height:50px; border:1px solid #000; "></Div> </Div></Div></Body><Scripttype= "Text/javascript"> varobj1=document.getElementById ('ID1'); Obj1.addeventlistener ('Click',function() {alert ('ID1'); },false); varObj2=document.getElementById ('Id2'); Obj2.addeventlistener ('Click',function() {alert ('Id2'); },true); varobj3=document.getElementById ('ID3'); Obj3.addeventlistener ('Click',function() {alert ('ID3'); },true); /*If the third argument is true, the event is executed during the capture phase, and if the third argument is false, the event is executed in the bubbling phase*/</Script></HTML>
When you click on the ID3 element, the result is: ID2,ID3,ID1
Parsing: The Obj1 event is performed in the bubbling phase because the method obj2 with Obj3 is executed during the capture phase.
SummarizeIn JS, the default execution time of the bound event is performed during the bubbling phase, not during the capture phase, which must be understood
However, we can specify whether the event execution time is in the bubbling or capturing phase by binding an event.
Obj.addeventlistener (Event,function () {},bool)
Bool:false, representing the bubbling phase of execution
Bool:true, representing capture phase execution
JS Gets the event by default, starts capturing all listeners for that event from the root element, and then executes one at a time during the bubbling phase. The capture phase is preceded by the bubbling phase
Stop bubbling
The method is E.stoppropagation (), ie is using e.cancelbubble = true;
Block default behavior
The method is E.preventdefault (), IE is the use of E.returnvalue = false;
About JS event bubbling and Onclick,click,on () event triggering sequencePriority relationship of Onclick,click,on (): Onclick>click>on ();
OnClick and click-bound events, which follow event bubbling rules between each other, are triggered from inside to outside;
The On () bound event is always later than the onclick and click-bound event triggers;
The order of binding events in JS (the difference between event bubbling and event capture)
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
