The evil complement jquery (four) events in jquery-bubbling

Events

When we open a page, the browser interprets the page, which is actually driven by the execution of the event, which executes the load () event when the page loads the event, which is the process by which the browser interprets the execution code.

Event Mechanismbubbling phenomenon in the event

bubbling is a sequence of events that, when an event is triggered on an object, if no handler is defined for this event, or if the event returns true, then the event propagates to the object's parent object, from inside to outside, Until he is processed (all homogeneous events of the parent object are activated), or it reaches the top level of the object hierarchy (that is, the Document object).

Popular speaking: fake set a glass of water into a few layers of different colors, when heating water, when there is a bubble in the bottom layer appears, the bubbles will rise to a level, until the top of the layer. And we can catch this bubble no matter which layer we observe, this glass of water is our "DOM", "bubble" is our thing bubble.

Event Bubbling Example

as shown in the following code

<span style= "FONT-SIZE:14PX;" ><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">Run result 1:   

Figure 1
 from this we can see that for the same event (both the OnClick event), first the underlying trigger, and then the previous trigger event, which is "bubbling out from the inside".
and when we change the H5 tag event of the parent class for onmousedown   , we will see the following results. Although it should be the first trigger in the layer for bubbling, the trigger timing encounters an OnClick event for event onmousedown. 
Figure 2
how does that stop bubbling? 
 js block bubble phenomenon
 as shown in the following code:
<span style= "FONT-SIZE:14PX;" ><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
jquery blocking bubbling phenomenon
 If you are accessing through jquery, the blocking bubbling behavior is as follows
<span style= "FONT-SIZE:14PX;" > $ (function () {            $ ("a"). Click (Function (event) {                  return false;            });}); </span>
  or
<span style= "FONT-SIZE:14PX;" >$ (function () {            $ ("a"). Click (Function (event) {                  event.stoppropagation ();            });}); </span>

after the above execution, we will find that the execution return false after the,<a> tag no longer jumps, while the others are jumping, how to prevent the event of the default jump behavior? 

 Another method is Event.preventdefault (), which does not handle the bubbling of events, but rather blocks the default behavior of events. The return false method prevents bubbling and prevents the default behavior of the event, Event.stoppropagation () only blocks the bubbling behavior of the event, but does not block the default behavior of the event. 





The evil complement jquery (four) events in jquery-bubbling