(1) What is the event bubbling
First of all, you have to understand that when an event occurs, the event always has an event source, that is, the object that triggered the event, an event cannot be created in a vacuum, and that is the event that occurs.
When the event occurs, the event will begin to spread. Why do you want to spread it? Because the event source itself does not have the ability to handle events. For example, when we click on a button, we produce a click event, but the button itself does not handle this event (nonsense), the event must be propagated from this button, so as to get to 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 Click event of the button.
When the event was propagated, a function was found to handle it, and we said that the function captured the event.
The key question here, then, is how does a function capture an event? This involves the bubbling up of events.
To better understand the concept of bubbling, I suggest you now imagine that you have a glass of water in front of you, but this glass of water and we usually see a little bit different, it is divided into several layers, each layer is divided into one or more areas, the top level is our familiar Window object (ie Window object), The next layer is divided into several areas (document object, History object, and so on), and the next layer of the Document object is divided into multiple child objects.
The hierarchical relationships of these objects form the tree of objects in the DOM.
The event is propagated in a directional way, and the event that occurs when a button is clicked is propagated upward from the button (like a blister coming up from the bottom of the cup, which is why it is called an event bubbling), but this event always looks for a specific attribute to have a value. For example, the Click event for 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 a section of executable statement), and if so, executes the function or statement, and the event continues to propagate upward, Gets to the top layer of the button (for example, a Form object or a Document object, or a parent object that contains the button), and executes the value of the property if the object also defines the OnClick property.
So, if the button has 3 layers (form, document, window) and the three layers have the onclick attribute defined, then when the click event of the button is generated, 4 (including one of the button itself) functions or 4 paragraphs are called.
These features of the event are also applicable in 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:
Copy Code code as follows:
$ ("form"). Bind (
"Submit",
function () {
return false;
}
);
2. By using the Preventdefault () method, only the default behavior is canceled.
JQuery Code:
Copy Code code as follows:
$ ("form"). Bind (
"Submit",
function (event) {
Event.preventdefault ();
}
);
3. By using the Stoppropagation () method, only one event is prevented from bubbling.
JQuery Code:
Copy Code code as follows:
$ ("form"). Bind (
"Submit",
function (event) {
Event.stoppropagation ();
}
);
(3) about the JS event foaming Verification
Today this problem mainly involves several keywords: objects, triggering events, capturing events, performing processing, foaming. This is actually the entire JS implementation process. The process of bubbling is interesting. Actually it's like a glass of water, but this glass of water is layered, at the bottom is the object that triggers the event. Then the larger the upper range, the top is definitely window, the penultimate layer is document. Bubbles in the ascent process will determine whether the currently reached layer has no binding event handling method. If you have words, do the appropriate processing. If not, continue to blister. Until the topmost window layer is reached. We can do the appropriate processing at any level to prevent the event from continuing to blister. The method is to invoke the method of blocking bubbles for the event object. Event.stoppropagation (); The following is a written validation of the JS event bubble process method.
Copy Code code as follows:
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ('. One '). Click (function (e) {
Alert (' one ');
});
$ ('. two '). Click (function (e) {
Alert (' two ');
});
$ ('. three '). Click (function (e) {
Alert (' three ');
Prevent bubbling cancel the following comment
E.stoppropagation ();
});
});
</script>
<div class= "One" style= "Width:200px;height:200px;background:green;" >
One
<div class= "Two" style= "Width:150px;height:150px;background:yellow;" >
Two
<div class= "three" >
Three
</div>
</div>
</div>
(4) Summary
1. An event bubbling corresponds to triggering the same event at the top
Special: If two is set to double-click an event, the event that triggers one click is bubbling when you click Two
(Double-click the Include).
2. If in the Click event, add E.preventdefault () before the event you want to handle;
Then cancel the behavior (Popular understanding: equivalent to doing a return operation), do not execute the following statement.
3.e.stoppropagation () The upper Click event is not triggered as long as in the Click event.
