Jquery Event Bubbling

Secyingjquery Event Bubbling

Original link http://blog.163.com/chtx87_98/blog/static/654011192011830928585/

original link two: http://hi.baidu.com/armyknife/blog/item/60ddc6c378b00847b219a81b.html

(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, weWhen a button is clicked, a click event is generated, but the button itself cannot handle the event (nonsense),The event must be propagated from this button to get to the code that can handle the event (for example, we assign a function name to the button's OnClick property, that is, let the function handle the button's click event).

When the event is in the process of propagation,
Speaking of which, 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 is a little bit 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 make up the object tree in the DOM. The propagation of the
event is directional, and when a button is clicked the resulting event begins 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 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 () {

　　　　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.

<script type= "Text/javascript" >

$ (document). Ready (function () {

$ ('. One '). Click (function (e) {

Alert (' one ');

});

$ ('. "). Click (function (e) { 　

alert (' both ');

});

$ ('. three '). Click (function (e) {

Alert (' three ');

Block Bubbles Cancel the comments below

//E.stoppropagation ();

});

});

</script>

<div class= "One" style= "Width:200px;height:200px;background:green;" >

One

<div class= "The" style= "Width:150px;height:150px;background:yellow;" >

Both

<div class= "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's wording:
1) Stop bubbling The wording

If an event object is provided, this is a non-IE browser If(E& & E.stoppropagation ) 　　So it supports the Stoppropagation () method E.stoppropagation(); Else 　　Otherwise, we need to use IE to cancel the event bubbling Window. event. cancelbubble = true; return false;

2) block browser's default behavior

If an event object is provided, this is a non-IE browser & & E.) Block default browser action (web) E.preventdefault(); Else

jquery's notation:
1)return False:in event handler, prevents default behavior and event bubbing.
return false in the handling of events, you can block default events and bubbling events.
2)Event.preventdefault (): In event handler, prevent default event (allows bubbling).
Event.preventdefault () in the handling of the event, you can block the default event but allow the bubbling event to occur.
3)event.stoppropagation (): In event handler, prevent bubbling (allows default behavior).
Event.stoppropagation () in event handling, you can prevent bubbling but allow default events to occur

Prototype's wording:
Event.stop (Event)
Usage Description:
After an event occurs, the browser usually first triggers an event handler on the element that occurs, then its parent element, the parent element of the parent element ... And so on, until the root element of the document. This is known as event bubbling, which is the most common way of event propagation. After you've handled an event, you might want to stop the event from spreading, and you don't want it to continue bubbling.
When your program has a chance to handle events, if the event has a default behavior, the browser will also handle it. For example, click the navigation link, submit the form to the server, press ENTER in a single-line text box, and so on. If you define your own handling of these events, you may want to block the associated default behavior very much.