Binding Event Sequence in JS (difference between event bubbling and event capturing) and js bubbling

Binding Event Sequence in JS (difference between event bubbling and event capturing) and js bubbling

In JS, the default execution time of bound events is in the bubble stage, rather than in the capture stage (important). This is why when the parent class and subclass are bound to an event, first, the events bound to the subclass are called, and then the events of the parent class are called. Directly look at the following instance

<! Doctype html> 
When the id3 element is clicked, the execution result is: id2, id3, id1
Resolution: Because the obj2 method bound to obj3 is executed in the capture phase, the obj1 event is executed in the bubble phase.
Summary
In JS, the default execution time of bound events is in the bubble stage, rather than in the capture stage.
However, when binding events, we can specify whether the event execution time is in the bubble or capture phase.
obj.addEventListener(event,function(){},bool)
Bool: false, indicating execution in the bubble stage
Bool: true, which indicates the capture stage.
After JS obtains an event by default, it starts to capture all the listening objects of the event from the root element and then runs them one by one in the bubble phase.The capture phase is prior to the bubble phase.
Prevents bubbles
The w3c method is e. stopPropagation (), and IE uses e. cancelBubble = true;
Block default behavior
The w3c method is e. preventDefault (), and IE uses e. returnValue = false;
About JS event bubbling and onclick, click, on () event trigger sequence
Priority of onclick, click, on (): onclick> click> on ();
Events bound to onclick and click are triggered from inside to outside according to the event bubble rules;
Events bound to on () are always triggered later than events bound to onclick and click;
The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!