JS event bubbling, event capture

The AddEventListener () method can specify the "usecapture" parameter to set the delivery event type:false→ bubble true→ captures the default false.

The inner element is the p tag, the outer element is the div tag, and the experiment is as follows:

In bubbling, an inner element's event is first triggered before the outer element is triggered, in order: internal ==> External

CSS:. whb100{width:100px;height:100px;border:1px dotted red}.whb200{width:200px;height:200px;border:1px Dotted #2ea6df}.center{margin-left:25%;margin-top:25%;} HTML:<div  class= "whb200 usecapturefalse" id= "" >      <p  class= "whb100 Center UseCaptureFalse2 "></p></div>js:var usecapturefalse=document.queryselector (". Usecapturefalse ") var usecapturefalse2=document.queryselector (". UseCaptureFalse2 ") Usecapturefalse2.addeventlistener ("click", Function () {    alert ("you clicked P Element!");}, False); Usecapturefalse.addeventlistener ("click", Function (event) {    alert ("You clicked on the div element!");    Console.log (Event)}, False);

In a capture, an event of an external element is first triggered and then triggered inside an outer element, in order: external ==> Internal

CSS:. whb100{width:100px;height:100px;border:1px dotted red}.whb200{width:200px;height:200px;border:1px Dotted #2ea6df}.center{margin-left:25%;margin-top:25%;} HTML:<div  class= "whb200 usecapturefalse" id= "" >      <p  class= "whb100 Center UseCaptureFalse2 "></p></div>js:var usecapturefalse=document.queryselector (". Usecapturefalse ") var usecapturefalse2=document.queryselector (". UseCaptureFalse2 ") Usecapturefalse2.addeventlistener ("click", Function () {    alert ("You clicked on P2 element!");}, False); Usecapturefalse.addeventlistener ("click", Function (event) {    alert ("You clicked Div2 Element!");    Console.log (Event)}, False);

　

JS event bubbling, event capture