This article analyzes the JS bubbling event and event capture. Share to everyone for your reference, specific as follows:
Case
<! DOCTYPE html>
Summary
1. Click Mydiv. In turn, Div-body-html-document-window.
2. Click on other blank places. In turn, Html-document-window.
3. Two consecutive clicks, will be executed in order twice
4. The premise of bubbling is that the parent also defines the corresponding event
Let's look at a more complicated example.
<! DOCTYPE html> <html> <head> <meta charset= "Utf-8" > <title> event capture </title> <script t Ype= "Text/javascript" > window.onload = function () {Window.addeventlistener ("click", Function () {alert
("Window-true"); }, True); True-the event handle executes in the capture phase, false-false-default.
The event handle executes Document.addeventlistener in the Bubbling phase ("click", Function () {alert ("Document-true");
}, True);
Document.documentElement.addEventListener ("click", Function () {alert ("Html-true");
}, True);
Document.body.addEventListener ("click", Function () {alert ("Body-true");
}, True);
document.getElementById ("Mydiv"). AddEventListener ("click", Function () {alert ("Div-true");
}, True);
Window.addeventlistener ("click", Function () {alert ("Window-false"); }, False); True-the event handle executes in the capture phase, false-false-default. The event handle executes Document.addeventlistener in the Bubbling phase ("click", Function () {alert("Document-false");
}, False);
Document.documentElement.addEventListener ("click", Function () {alert ("Html-false");
}, False);
Document.body.addEventListener ("click", Function () {alert ("Body-false");
}, False);
document.getElementById ("Mydiv"). AddEventListener ("click", Function () {alert ("Div-false");
}, False);
Window.onclick = function () {alert ("Window-click");//top-level};
Document.onclick = function () {alert ("Document-click");//secondary top-level};
Document.documentElement.onclick = function () {alert ("Html-click");//secondary top-level};
Document.body.onclick = function () {alert ("Body-click");//secondary top level}; document.getElementById ("Mydiv"). onclick = function () {alert ("Div-click");//First executed, and passed to the previous level. Click two times, then execute two times in order.
If the superior also has the Click event}; } </script> </head> <body> <div id= "mydiv" > Point I </div> </body> </html>
Summary
1. The results of the click execution are
Window-true
Document-true
Html-true
Body-true
Div-true
Div-false
Div-click
Body-false
Body-click
Html-false
Html-click
Document-false
Document-click
Window-false
Window-click
2. Order is independent of JS code order
3. Even if you do not define a click event, you can capture the click event, as long as you click on it to capture
Remake again, stop bubbling
<! DOCTYPE html> <html> <head> <meta charset= "Utf-8" > <title> event capture </title> <script t Ype= "Text/javascript" > window.onload = function () {Document.addeventlistener ("click", Function () {Ale
RT ("Document-true");
}, True);
Window.addeventlistener ("click", Function () {alert ("Window-true"); }, True); True-the event handle executes in the capture phase, false-false-default.
The event handle executes Document.documentElement.addEventListener in the Bubbling phase ("click", Function () {alert ("Html-true");
}, True);
Document.body.addEventListener ("click", Function () {alert ("Body-true");
}, True);
document.getElementById ("Mydiv"). AddEventListener ("click", Function () {alert ("Div-true");
}, True);
Window.addeventlistener ("click", Function () {alert ("Window-false"); }, False); True-the event handle executes in the capture phase, false-false-default. The event handle executes Document.addeventlistener in the Bubbling phase ("click", Function () {alert("Document-false");
}, False);
Document.documentElement.addEventListener ("click", Function () {alert ("Html-false");
}, False);
Document.body.addEventListener ("click", Function () {alert ("Body-false");
}, False);
document.getElementById ("Mydiv"). AddEventListener ("click", Function () {alert ("Div-false");
}, False);
Window.onclick = function () {alert ("Window-click");//top-level};
Document.onclick = function () {alert ("Document-click");//secondary top-level};
Document.documentElement.onclick = function () {alert ("Html-click");//secondary top-level};
Document.body.onclick = function () {alert ("Body-click");//secondary top level}; document.getElementById ("Mydiv"). onclick = function () {alert ("Div-click");//First executed, and passed to the previous level. Click two times, then execute two times in order. If the superior also has the Click event Event.stoppropagation ();
Block bubbling}; } </script> </head> <body> <div id= "Mydiv "> Point I </div> </body> </html>
Summary
Window-true
Document-true
Html-true
Body-true
Div-true
Div-false
Div-click
Terminated, no further content.
For more information on JavaScript-related content readers can view the site topics: "JavaScript events related operations and Skills encyclopedia", "JavaScript time and date Operation skills Summary", "JavaScript switching effects and techniques summary", " JavaScript Search Algorithm Skills Summary, "JavaScript animation effects and techniques Summary", "JavaScript Error and debugging skills Summary", "JavaScript data structure and algorithm skills summary", "JavaScript traversal algorithm and skills summary" and The summary of JavaScript mathematical operational usage
I hope this article will help you with JavaScript programming.
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
