JS Learning event Bubbling

(1) What is event foaming
first of all, you have to understand that when an event occurs, the event always has an event source, that is, the object that raised the event, an event cannot be generated out of thin air, this is the occurrence of the event.
when the event occurs, the event will begin to spread. Why should it be spread? Because the event source itself does not have the ability to handle events. For example, when we click on a button, a click event is generated, but the button itself cannot handle the event (nonsense), and the event must be propagated from this button to reach the code that can handle the event (for example, we assign a function name to the button's OnClick property, is to have this function handle the button's click event). When the event is propagated and a function is found to handle it, we say that this function captures the event. Here, the key question is, how does a function capture an event? This involves the bubbling of events.
in order to better understand the concept of bubbling, I suggest you now imagine a glass of water in front of you, but this glass of water and we usually see a little different, it is divided into several layers, each layer is divided into one or more areas, the topmost layer is our familiar window object (that is, Windows object), The next layer is divided into several regions (Document object, History object, and so on), and the next layer of the Document object is divided into sub-objects.
The hierarchical relationships of these objects make up the object tree in the DOM, and the propagation of events is directed, and when a button is clicked the resulting event starts to propagate upward from the button (like a blister coming up from the bottom of the cup, which is the reason for the event bubbling), but this event always looks for the value of a particular property. For example, the Click event of a button first looks for a meaningful definition of the OnClick property on the button (that is, the attribute points to an existing function or an executable statement), if any, executes the function or statement, and then the event continues to propagate upward, The upper-level object that reaches the button, such as a Form object or a Document object, in short, the parent object that contains the button, and if the object also defines the OnClick property, the value of the property is executed.
So, if the button has 3 layers (form, document, window), and the three layers define the OnClick property, then when the button's Click event is generated, 4 (including one of the button itself) function is called, or a 4-segment statement is executed. These features of the event are also applicable in Level 0 dom.
(2) jquery blocking event bubbling instance
1. Cancel the default behavior by returning false and prevent the event from bubbling.

JQuery Code:
$ ("form"). Bind (
"Submit",
function () {
return false;
}
);

2. Only the default behavior is canceled by using the Preventdefault () method.
jQuery Code:
$ ("form"). Bind (
"Submit",
function (event) {
Event.preventdefault ();
}
);
3. Only one event bubble is blocked by using the Stoppropagation () method.
jQuery Code:
$ ("form"). Bind (
"Submit",
function (event) {
event.stoppropagation ();
}
);
(3) on the validation of the JS event foaming
Today this issue mainly involves several key words: Object, trigger event, capture event, execute processing, bubble. This is actually the entire JS execution process. The process of bubbling is interesting. It's like a glass of water, but this glass of water is layered and at the bottom is the object of the current triggering event. Then the farther up the range, the topmost layer must be window, the penultimate level is document. Bubbles in the float process will determine whether the currently reached layer has no binding event handling methods. Do the appropriate processing if you have any words. If not, continue to bubble. Until the topmost window layer is reached. We can do the appropriate processing on any level to prevent the event from continuing to bubble. Method is the method that invokes the event object's blocking bubbles. Event.stoppropagation (); Here is a process method for verifying the bubbling of the JS event.

1<script type= "Text/javascript" >2$ (document). Ready (function(){3$ ('. One '). Click (function(e) {4Alert (' One ');5 }); 6$ ('. "). Click (function(e) {7Alert (' Both '); 8 }); 9$ ('. three '). Click (function(e) {TenAlert (' Three '); One //block Bubbles Cancel the comments below A //e.stoppropagation (); - }); - }); the  -</script> -  -<div class= "One" style= "Width:200px;height:200px;background:green;" > +  -  One +  A<div class= "The" style= "Width:150px;height:150px;background:yellow;" > at  -  Both -  -<div class= "three" > -  - three in  -</div> to  +</div> -  the</div>

View Code

(4) Summary

1. An event blistering corresponds to the same event that is triggered by the upper layer, Special: If you double-click the event, then the event that triggers one click is triggered when you double-clicked on the other, with the click of the single clicked.
2. If you add E.preventdefault () before the event you want to handle in the Click event, then the behavior is canceled (popular understanding: equivalent to a return operation), and no subsequent statements are executed.
3.e.stoppropagation () The upper-level click event is not triggered as long as in the Click event.

JS Learning event Bubbling