<HTMLxmlns= "http://www.w3.org/1999/xhtml"> <Head><title></title></Head><Body><Div> <aID= "P"onclick= "alert (' Parent-onclick ')"style= "display:block;background-color:red;width:400px;height:200px">One knife one<spanID= "El"onclick= "alert (' sub-onclick ')"style= "display:block;background-color:green;width:300px;height:150px">one shot, one .<DivID= "DL"onclick= "alert (' sun-level onclick ')"style= "display:block;background-color:gray;width:200px;height:100px"> <DivID= "SL"onclick= "alert (' great-grandchild-level onclick ')"style= "display:block;background-color:orange;width:120px;height:100px"></Div> </Div> </span> </a></Div><Scripttype= "Text/javascript">varEl=document.getElementById ('El');varP=document.getElementById ('P');varD=document.getElementById ('DL');varZ=document.getElementById ('SL');p. AddEventListener ('Click', function() {alert ('Parent-Bubble');}, false);p. AddEventListener ('Click', function() {alert ('Parent-level capture');}, true); El.addeventlistener ('Click', function() {alert ('Child capture');}, true); El.addeventlistener ('Click', function() {alert ('Sub-bubble');}, false);d. AddEventListener ('Click', function() {alert ('Sun Level capture');}, true);d. AddEventListener ('Click', function() {alert ('Sun level bubbling');}, false); Z.addeventlistener ('Click', function() {alert ('Great -grandchild bubble');}, false); Z.addeventlistener ('Click', function() {alert ('Great -grandchild capture');}, true);</Script></Body></HTML>
JS Bubble Capture