What is event bubbles: An event cannot be generated out of thin air. This is the event and so on. Next we will introduce jquery's prevention of event bubbles and verification of js event bubbles, if you are interested, refer
(1) What is event bubbles
First, you must understand that when an event occurs, there is always an event source, that is, the object that triggers the event. An event cannot be generated out of thin air. This is the event.
When an event occurs, it starts to spread. Why spread it? Because the event source does not have the ability to process the event. For example, when we click a button, a click event will be generated, but this button itself cannot handle this event (nonsense), the event must be propagated from this button, so as to reach the code that can handle this event (for example, we assign a function name to The onclick attribute of the button, that is, let the function process the click Event of the button ).
When an event finds a function that can process it during propagation, we can say that this function captures the event.
Here, the key question comes: How does a function capture an event? This involves event bubbling.
To better understand the concept of bubbling, I suggest you think there is a cup of water in front of you, but this cup of water is a little different from what we usually see, it is divided into several layers, each layer is divided into one or more areas. The top layer is the window object we are familiar with (that is, the window object). The next layer is divided into several areas (document Object, history object, etc ), the next layer of the document Object is divided into multiple child objects.
The hierarchical relationships of these objects constitute the object tree in the DOM.
The event is spread in a direction. When you click a button, the event starts to spread upwards from this button (just like a bubble popping up from the bottom of the cup, this is the reason for event bubbling), but this event always looks for whether a specific attribute has a value. For example, the click Event of a button first looks for meaningful definitions of The onclick attribute on the button (that is, the attribute points to an existing function or an executable Statement, execute this function or statement. Then, the event continues to spread up and reaches the upper layer of the button object (such as a form object or document object, which in short contains the parent object of the button ), if this object also defines the onclick attribute, the value of the execution attribute.
Therefore, if the button has three layers (form, document, window) on it and the onclick attribute is defined on the three layers, when the button's click event is generated, four (including one of the buttons) functions are called or four statements are executed.
These features of the event are also applicable in level 0 dom.
(2) jquery blocks event blister instances
1. Return false to cancel the default behavior and prevent event bubbles.
JQuery code:
The Code is as follows:
$ ("Form"). bind (
"Submit ",
Function (){
Return false;
}
);
2. Use the preventDefault () method to cancel the default action.
JQuery code:
The Code is as follows:
$ ("Form"). bind (
"Submit ",
Function (event ){
Event. preventDefault ();
}
);
3. You can use the stopPropagation () method to stop only one event bubble.
JQuery code:
The Code is as follows:
$ ("Form"). bind (
"Submit ",
Function (event ){
Event. stopPropagation ();
}
);
(3) Verification of js event bubbles
Today, this issue mainly involves several keywords: object, trigger events, capture events, execute processing, and blister. This is actually the entire js execution process. The bubble process is very interesting. In fact, it is like a cup of water, but this cup of water is hierarchical, at the bottom of which is the object of the current event. Then, the larger the range is, the top layer must be window, and the bottom layer is document. During the floating process, the bubble determines whether the layer to be reached is bound to an event handling method. Execute corresponding processing when there is something. If not, continue to blister. Until it reaches the top-level window layer. We can perform corresponding processing at any layer to prevent the event from continuing to bubble. The method is to call the method to prevent blister of the event object. Event. stopPropagation (); below is a method written to verify js event bubbles.
The Code is as follows:
