Js bubbling event detailed explanation and blocking example_javascript skills

The JS bubbling mechanism means that if an element defines an event A, such as a click event, and if the event is triggered and the bubbling event is not blocked, the event will propagate to the parent element and trigger the click function of the parent class.
As shown in the following example:

Copy the code The code is as follows:

<script> <br>function ialertdouble(e) { <br> alert('innerdouble'); <br>stopBubble(e); <br>} <br><br>function ialertthree(e) { <br>alert('innerthree'); <br>stopBubbleDouble(e); <br>} <br><br>function stopBubble(e) { <br>var evt = e||window.event; <br>evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);/ /Stop bubbling<br>} <br><br>function stopBubbleDouble(e) { <br>var evt = e||window.event; <br>evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble =true);//Prevent bubbling<br>evt.preventDefault();//Prevent the browser’s default behavior so that the link will not jump<br>} <br><br>$(function() { <br>//Method 1<br>//$('#jquerytest').click(function(event) { <br>// alert('innerfour'); <br>// event.stopPropagation(); <br>// event.preventDefault(); <br>//}); <br><br>//Method 2<br>$('#jquerytest').click(function() { <br>alert( 'innerfour'); <br>return false; <br>}); <br>}); <br></script>

without

middle

inner

< div onclick="ialertdouble(event)">innerdouble

innerthree< ;/a>

innerfour

When you click inner, 'inner', 'middle' will pop up in sequence and 'without'. This is event bubbling.

Intuitively, this is also the case, because the innermost area is in the parent node. Clicking the area of ​​the child node actually clicks the area of ​​the parent node, so the event will Spread it.

Actually, many times, we don’t want events to bubble up, because this will trigger several events at the same time.

Next: we click innerdouble. You will find that she does not bubble because she calls the stopBubble() method in the calling method ialertdouble(). The method prevents bubbling by determining the browser type (Ie uses cancleBubble(), Firefox uses stopProgation()).

But if it is a link, we will find that it will also prevent bubbling, but will jump. This is the default behavior of the browser. You need to use the preventDefault() method to prevent it. See ialertthree() for details.

Currently, the mainstream method is to use jquery to bind click events. In this case, it will be much simpler.

We can pass in the parameter event when clicking the event, and then directly

event.stopPropagation();
event.preventDefault(); //No need to add this if there is no link.

That’s it.

The framework is good, but there is actually an easier way, returning false in the event handler. This is a shorthand way of calling stopPropagation() and preventDefault() on the event object at the same time.
[See the detailed code above, remember to load jquery.js. ]

In fact, you can also add judgment to each click event:

Copy code The code is as follows:

$('#id').click(function(event){
if(event.target==this){
//do something
}
})

Analysis: The variable event in the event handler stores the event object. The event.target attribute stores the target element where the event occurred. This attribute is specified in the DOM API, but is not implemented by all browsers. jQuery makes the necessary extensions to this event object so that this property can be used in any browser. With .target, you can determine the element in the DOM that first received the event (i.e. the element that was actually clicked). Moreover, we know that this refers to the DOM element that handles the event, so we can write the above code.

However, it is recommended to use return false if Jquery binds events.