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