What is the event bubble: An event can not be generated from thin air, this is the occurrence of events and so on, next for you to introduce the jquery block event foaming and on the JS event foaming verification, interested friends can refer to ha (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, we click on abutton, 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.
Speaking of which, the key question comes, and that is aHow does the 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 is a little different from what we normally see, it is divided into layers, each layer is divided into one or more areas, and the topmost layer is the Window object we are familiar with (that is, the 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 form the object tree in the DOM.
The propagation of the event is directed, and when a button is clicked the resulting event starts to propagate upward from the button (just like a blister coming up from the bottom of the cup, which is why the event is bubbling), but this event always looks for a specific attribute with a value. 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. &NBSP
Therefore, if the button has 3 layers (form, document, window), and the three layers define the OnClick property, 4 will be called when the button's Click event is generated (including one of the button itself) function or execute a 4-segment statement. These characteristics of the
event are also applicable in the level 0 Dom.
(2) jquery block event bubbling instance
1, by returning false to cancel the default behavior and prevent the event from bubbling.
JQuery code:
$ ("form"). Bind ( "Submit", function() { returnfalse
2. Only the default behavior is canceled by using the Preventdefault () method.
JQuery Code:
$ ("form"). Bind ( "Submit", function
3. Only one event bubble is blocked by using the Stoppropagation () method.
JQuery Code:
$ ("form"). Bind ( "Submit", function
(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.
<Scripttype= "Text/javascript">$ (document). Ready (function(){ $('. One'). Click (function(e) {alert (' One'); }); $('. the'). Click (function(e) {alert (' Both'); }); $('. Three'). Click (function(e) {alert ('three'); //block Bubbles Cancel the comments below//e.stoppropagation ();}); }); </Script> <Divclass= "One"style= "Width:200px;height:200px;background:green;"> One<Divclass= "both"style= "Width:150px;height:150px;background:yellow;"> Both<Divclass= "three">three</Div> </Div> </Div>
(4) Summary
1. One event blistering corresponds to the same event that triggered the upper layer
Special: If both are set to double-click events, the event that triggers one click is bubbled when you click
(Double-click to include the clicked).
2. If in the Click event, precede the event you want to process with e.preventdefault ();
Then cancel the behavior (Popular understanding: equivalent to do a return operation), do not execute after the statement.
3.e.stoppropagation () The upper-level click event is not triggered as long as in the Click event.
JS event bubbling is what how to block events bubbling with jquery
