Home > Developer > Web Develop
Event capture Phase : Events are looked up from the top level of the label until the event target is captured.
Event bubbling Stage : The event starts with the event target and bubbles up to the top level of the page label.
The diagram shows the following:
1. Bubbling event:
Events are triggered in the order from the most specific event target to the least specific event target (Document object). In layman's terms, it is when you set up multiple div nesting, that is, to set up a parent-child relationship, when the parent div and the sub-Div joined the onclick event, when the sub-div triggered the OnClick event, the sub-div to do the corresponding JS operation, But the OnClick event of the parent Div is also triggered.
<HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Test event bubbling</title> <style>Div{padding:40px;}#div1{background:#00B83F;}#div2{background:#2a6496}#div3{background:#93C3CF} </style> <Script>window.onload=function (){ varOdiv1=document.getElementById ("Div1"); varOdiv2=document.getElementById ("Div2"); varOdiv3=document.getElementById ("Div3"); functionFdiv1 () {alert ("Div1"); } functionFdiv2 () {alert ("Div2"); } functionfdiv3 (EV) {alert ("Div3"); } Odiv1.onclick=Fdiv1; Odiv2.onclick=Fdiv2; Odiv3.onclick=Fdiv3; } </Script></Head><Body> <DivID= "Div1"> <DivID= "Div2"> <DivID= "Div3"></Div> </Div> </Div></Body></HTML>
Test Result: Click Div3, pop Up Div3,div2,div1
2. Block Event bubbling:
Change the binding event for Div3 to. Ev.cancebubble=true;
function Fdiv3 (EV) { var En=ev | | event; En.cancelbubble=true; Alert ("Div3"); }Test result: When clicked Div3, only pop-up Div3
3. Event Capture :
From the top-level element to the target element or from the target element to the top-level element, and event bubbling is an opposite process. Events are triggered from the most imprecise object (the Document object), and then to the most precise (you can also capture events at the window level, but must be specifically specified by the developer).
The code changes as follows:
<script>window.onload=function (){ varOdiv1=document.getelementbyid ("Div1"); varOdiv2=document.getelementbyid ("Div2"); varOdiv3=document.getelementbyid ("Div3"); Odiv1.addeventlistener ("Click",function() {alert ("Div1"); },true); Odiv2.addeventlistener ("Click",function() {alert ("Div2"); },true); Odiv3.addeventlistener ("Click",function() {alert ("Div3"); },true); }</script>
Test Result: Click Div3, pop Up Div1,div2,div3
Conclusion: When a binding event is passed through the AddEventListener function, it has three parameters, and the third parameter, if true, indicates that the event is captured and, if False, event bubbling is used.
Event bubbling and event capture in JS
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
