Home > Developer > Web Develop
Paste the code First:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Bubble</title> <style>#a{width:300px;Height:300px;Background-color:Cadetblue; }#b{width:200px;Height:200px;Background-color:Chocolate; }#c{width:100px;Height:100px;Background-color:Coral; } </style></Head><Body><DivID= "a"> <DivID= "B"> <DivID= "C"></Div> </Div></Div><Scriptsrc= "Mainx.js"></Script></Body></HTML>HTML
/** * Created by Administrator on 2016/8/10.*/(function () { varA=document.getelementbyid ("a"); varB=document.getelementbyid ("B"); varC=document.getelementbyid ("C"); A.addeventlistener ("Click",function() {Console.log ("A is clicked"); }); B.addeventlistener ("Click",function() {Console.log ("B is clicked"); }); C.addeventlistener ("Click",function() {Console.log ("C is clicked"); }); })();JS
Run results
When you click on the minimum block C, A and B are also clicked. It also led to the so-called bubbling.
When the JS code is modified to
/** * Created by Administrator on 2016/8/10.*/(function () { varA = document.getElementById ("a"); varb = document.getElementById ("b"); varc = document.getElementById ("C"); A.addeventlistener ("Click",function() {Console.log ("A is clicked"); }); B.addeventlistener ("Click",function() {Console.log ("B is clicked"); }); C.addeventlistener ("Click",function(event) {Console.log ("C is clicked"); Event.stoppropagation (); });}) ();JS
The result is:
When you click C, only C is clicked
The Stoppropagation () method blocks the bubbling behavior.
When the code is modified again to:
/** * Created by Administrator on 2016/8/10.*/(function () { varA = document.getElementById ("a"); varb = document.getElementById ("b"); varc = document.getElementById ("C"); A.addeventlistener ("Click",function() {Console.log ("A is clicked"); }); B.addeventlistener ("Click",function() {Console.log ("B is clicked"); }); C.addeventlistener ("Click",function(event) {Console.log ("C is clicked"); Event.stoppropagation (); }); C.addeventlistener ("Click",function() {Console.log ("C1 is clicked"); });}) ();JS
The result is:
When you click on C, two events will be triggered.
In the modified code:
/** * Created by Administrator on 2016/8/10.*/(function () { varA = document.getElementById ("a"); varb = document.getElementById ("b"); varc = document.getElementById ("C"); A.addeventlistener ("Click",function() {Console.log ("A is clicked"); }); B.addeventlistener ("Click",function() {Console.log ("B is clicked"); }); C.addeventlistener ("Click",function(event) {Console.log ("C is clicked"); Event.stoppropagation (); Event.stopimmediatepropagation (); }); C.addeventlistener ("Click",function(event) {Console.log ("C1 is clicked"); });}) ();JS
The result is:
It becomes only one event is triggered.
The Stopimmediatepropagation () method blocks only the parent class and does not block sibling events.
Bubble over
Start speaking three stages:
Three stages of an event: capture, Target, bubble.
Capture phase: From outside to inside, listener set to true, subclass event does not produce
Target stage: Click on the target
Bubbling stage: from inside to outside
Paste the code First:
/** * Created by Administrator on 2016/8/10.*/(function () { varA = document.getElementById ("a"); varb = document.getElementById ("b"); varc = document.getElementById ("C"); A.addeventlistener ("Click",function() {Console.log ("A is clicked" in the bubbling phase); }); B.addeventlistener ("Click",function() {Console.log ("The bubbling phase of B is clicked"); }); //C.addeventlistener ("click", Function (event) { //Console.log ("C is clicked"); ////Event.stoppropagation (); //event.stopimmediatepropagation (); // });C.addeventlistener ("click",function(event) {Console.log ("Target phase of C is clicked"); }); B.addeventlistener ("Click",function(event) {Console.log ("The capture phase of B is clicked"); },true); A.addeventlistener ("Click",function() {Console.log ("A is clicked in the capture phase"); },true);}) ();JS
The result of the execution is:
The execution order is first captured, after the target, in bubbling. Can also be understood as, from outside to inside, from inside to outside.
In addition, you can use Event.eventphase to test what stage it is,
Capture phase with a return value of 1
Target phase with a return value of 2
Bubbling phase with a return value of 3
Own understanding of:
Usage, also useless to, later supplement (⊙﹏⊙) B;
Prevents the benefits of bubbling, preventing child elements from being clicked and triggering child class events.
Set the benefit of the capture (set, true property at the end), which can be the bubbling event reverse execution.
JS events in 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
