Detailed JavaScript event bubbling _javascript tips

Events are one of the core elements of JavaScript, and an important concept that inevitably comes to the application of events is event bubbling, which introduces another important conceptual event flow before introducing event bubbles:
A. What is an event flow:
The Document Object Model (DOM) is a tree-shaped structure that can be graphically represented by the image below.

If an HTML element triggers an event, the event is propagated in a certain order between the triggering node and the root node in the DOM tree, and all passing nodes receive the triggered event, which is called the event flow. According to the order in which events are propagated, they can be grouped into two categories, one is event bubbling, the other is event capture, and here is the topic to be covered in this chapter:
1. Event bubbling:
The so-called time bubble is when an element triggers an event, the event will be like a blister, propagating from the triggering element to all of its parent nodes until the root node receives this event, and if the corresponding event handler is registered in the parent element, even though the event is triggered at the child node, The event handler functions registered on the parent element are also triggered. For example, in the above illustration, if the onclick event of a element is triggered, then its parent element p, document, and widow will receive this event, and if there is a time handler in the corresponding parent element, the event handler will execute and look at a code instance:

The purpose of the above code is to pop up the contents of the corresponding cell when you click the corresponding cell. However, instead of registering the OnClick event handler for each cell in the above implementation, the OnClick event handler is registered on the cell's parent element table, triggering the OnClick event when the cell is clicked, and the event is propagated upward from the event object. The table element has a registered onclick event handler, which is executed at this time, and of course it is set to the issue of passing event object arguments. Event bubbling is supported for all browsers. Two. Event Capture:
Event capture and event bubbling on the contrary, when you click on an element, the direction of event propagation is from the root element to the trigger element, IE is not supported in order to support Cross-browser, so by default it is generally the use of bubble event processing model.
2.javascript block event bubbling Code
Event bubbling is very useful in some scenarios, but sometimes it has to be blocked, and here is an instance code that is capable of blocking event bubbling that is compatible with all major browsers.
Code instance:

function Stopbubble (e) 
{ 
 if (e&&e.stoppropagation) 
 { 
 e.stoppropagation (); 
 } 
 else
 { 
 window.event.cancelbubble=true; 
 } 
}

The above code can prevent the event bubbling, the following is a simple comment on the code:
Second, code comments:

• 1.function stopbubble (e) {}, this function is used to block event bubbling, and the parameter is an event object.
• 2. if (e&&e.stoppropagation) {e.stoppropagation ();}, to determine whether to support stoppropagation, use e.stoppropagation () if supported. The Stoppropagation () function IE10 and IE10 are not supported by the following browsers.
• 3.window.event.cancelbubble=true, the current IE browser uses this to prevent event bubbling.

The above is about JavaScript event bubbling detailed introduction, I hope to help you learn.