What is event bubbling? How to prevent event bubbling with jquery

What is event bubbling? How to prevent event bubbling with jquery_jquery

WBOY

Release： 2016-05-16 17:39:48

Original

914 people have browsed it

(1) What is 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 out of thin air. Produced, this is the occurrence of the event.

When an event occurs, the event will begin to spread. Why spread it? Because the event source itself does not have the ability to process events. For example, when we click a button, a click event will be generated, but the button itself cannot handle this event (nonsense). The event must be propagated from the button to reach the code that can handle the event (for example, we give the button onclick The attribute is assigned the name of a function, which is to let this function handle the click event of the button).

When an event finds a function that can handle it during propagation, then we say that this function captured the event.

Speaking of this, the key question comes, that 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 imagine that there is a glass of water in front of you, but this glass of water is a little different from what we usually see. It is divided into several layers. One layer is divided into one or more areas. The top level is the window object we are familiar with (window object). The next layer is divided into several areas (document object, history object, etc.), and the next layer of the document object is Divided into multiple sub-objects.

The hierarchical relationship of these objects constitutes the object tree in the DOM.
The propagation of events is directional. When a button is clicked, the event generated starts to propagate upward from the button (just like a bubble rising from the bottom of a cup, which is why it is called event bubbling). But this event always looks for whether a specific property has a value. For example, the click event of a button first looks for whether there is a meaningful definition of the onclick attribute on the button (that is, the attribute points to an existing function or an executable statement). If so, execute the function or statement; then the event continues to propagate upward. , to reach the upper-level object of the button (such as a form object or document object, in short, it contains the parent object of the button), if the object also defines the onclick attribute, the value of the attribute is executed.

So, if there are 3 layers (form, document, window) on this button, and these three layers all define the onclick attribute, then when the click event of the button is generated, 4 (including the button itself) function or execute 4 statements.
These characteristics of events are also applicable to level 0 DOM.

(2) Example of jquery preventing event bubbling
1. Cancel the default behavior and prevent event bubbling by returning false.
jQuery code:

Copy code The code is as follows:

 
$("form") .bind( 
 "submit", 
 function() { 
 return false; 
 } 
); 

2. By using preventDefault() method only Cancel the default behavior.
jQuery code:

Copy code The code is as follows:

 
$("form") .bind( 
 "submit", 
 function(event){ 
 event.preventDefault(); 
 } 
); 

3. By using stopPropagation () method only prevents an event from bubbling.
jQuery code:

Copy code The code is as follows:

 
$("form") .bind( 
 "submit", 
 function(event){ 
 event.stopPropagation(); 
 } 
); 

(3 ) Verification of js event bubbling
Today’s question mainly involves several keywords: object, trigger event, capture event, execution processing, and bubbling. This is actually the entire js execution process. The bubbling process is very interesting. In fact, it is like a glass of water, but this glass of water is layered, and the bottom is the object that currently triggers the event. Then the scope becomes larger as you go up, the top layer is definitely window, and the penultimate layer is document. During the floating process, the bubble will determine whether the layer it currently reaches has a bound event handling method. If necessary, the corresponding processing will be carried out. If not, continue foaming. Until you reach the topmost window layer. We can do corresponding processing at any layer to prevent the event from continuing to bubble. The method is to call the method of the event object to prevent bubbling. event.stopPropagation(); The following is a process method written to verify js event bubbling.

Copy code The code is as follows:

one 

two 
 
three 

(4) Summary

1. An event bubbling corresponds to triggering the same event in the upper layer Special: If two is set to a double-click event, then when you click two, it will bubble and trigger the one-click event (double-click includes click).
2. If in the click event, add e.preventDefault();
before the event you want to handle, then the behavior will be canceled (popular understanding: equivalent to a return operation), after not executing statement.
3.e.stopPropagation() will not trigger the upper-level click event as long as it is in the click event.