To understand the event bubbling mechanism, you have to first understand the event.
The browser is event-driven, triggering different events based on user behavior, perform the appropriate action based on the event. We are more familiar with the event there are three types: mouse and keyboard events, page events, form-related events.
鼠标键盘事件：onclick、ondbclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup；
Event page: onload, onunload, onresize, onerror, onabort;
Form-related events: onblur, onchange, onfocus, onreset, onsubmit.
Note that the event handler variable event retains information on the event object, including, for example click event, event attributes, there are clicked position relative to the browser, as well as coordinate information page, the type of event (click), a trigger event DOM node information.
What is the event bubble?
DOM, the tree structure determines the child element in the parent element in the affirmative, so click on the sub-elements, while clicking on the parent element and child elements, and parent of the parent element, and so, of course, ultimately the root of all documents and window.
Just think, when a child element is clicked, not just the element itself is clicked, because this element is also its immediate parent element (the site belongs to the parent element), so also the equivalent of its parent element is clicked , and so on, layer by layer push it, and ultimately the entire document is clicked, if each level of node elements binding the click event, click the event will be a function of each node is executed. For example the image of a village were hit (click), we must first deal with in accordance with the rules of the village, but this village is part of a town, of course, is the equivalent of the towns were hit, it should follow the township rule processing, layer by layer to this report. This example is not exactly the place is, in reality, a person because of an event is processed only once, and does not deal with the same thing many times.
Bubbling annoyance
When the upper layer (upper layer and on, until the body element) has the same parent child element method, but after the event your child elements, the same name as a function of all of the parent element will, from the inside out from the bottom up, one by one execution, but in most cases, we only want to perform sub-element event parties do not want to perform the layers, which is to find a way to prevent this bubbling occurs. For example, when we click on Child Span display only the content of Child Span. Just combine example is the beating incident occurred in the village, in the village resolved, there is no need to report the layer by layer, in the layers of the process.
Stop event bubbling method:
1 events continue to prevent the upper transfer process
Use stopPropagation event () function terminates the process of bubbling to the parent element.
Note that this method has a problem of compatibility, Event.stopPropagation () with no problems in supporting the W3C browser, but in IE becomes ineffective, the use Event.cancelBubble = true in IE instead:
if (Event.stopPropagation){
Event.stopPropagation(); }else{
Event.cancelBubble=true;
}
NOTE: In the vue, through .stop preventing, for example: <div @ click.stop = 'click1 '> </ div>
2 commissioned by the event, do not stop bubbling process, but then let the event triggered when the bubble to a specific node, is no longer triggered the layers
This method also does not prevent bubbling course of events, while not bubbling addition judgment on the execution method of each element of the process, but in the bubble of a parent node process, to judge all of its subordinate node event, then performs a corresponding operation.
Note that this process of bubbling the final node, not necessarily to the body, to document, to the window, can be any of a bubble during a stop bubbling node, so we can be on this node, all of its sub bubbling event element of judgment and processing.
This element itself trigger events, event execution method but not the element itself, but on a node of its parent element, this "model called the event delegate .