Js bubble event details and blocking example
- 2020-03-30 02:24:31
- OfStack
Js bubbling mechanism means that if an element defines an event A, such as the click event, and if the bubbling event is not stopped after the event is triggered, the event will be propagated to the parent element, triggering the click function of the parent class.
As shown in the following example:
When you click on inner, 'inner',' middle' and 'without' pop up in turn. This is event bubbling.
Intuitively, this is also true, because the innermost region is in the parent node, and if you click on the region of the child node, you actually click on the region of the parent node, so the event propagates.
In fact, most of the time, we don't want the event to bubble because it will trigger several events at once.
Next: we click innerdouble. You'll see that she doesn't bubble because she calls the stopBubble() method in the method ialertdouble(), which stops the bubble by determining the browser type (Ie cancleBubble(), firefox stopProgation()).
But if it's a link, we'll see that it also stops bubbling, but it jumps, which is the default behavior of the browser. You need the preventDefault() method to prevent this. See ialertthree() for details.
The current mainstream is to bind the click event with jquery, which makes it much easier.
We can pass in the parameter event when we click on the event, and then go directly
Event. StopPropagation ();
Event. The preventDefault (); // no link no need to add this.
That's it.
The framework is good, but it's even simpler to return false in an event handler, which is a shorthand way of calling both stopPropagation() and preventDefault() on an event object.
See the detailed code above, remember to load jquery.js.
You can also add a judgment to each click event:
Resolution: the variable event in the event handler holds the event object. The event.target attribute holds the target element where the event occurred. This property is specified in the DOM API, but not implemented by all browsers. JQuery extends this event object as necessary so that it can be used in any browser. With.target, you can determine the element in the DOM that received the event first (that is, the element that was actually clicked). Furthermore, 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 when Jquery binds events.
As shown in the following example:
<html>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script>
function ialertdouble(e) {
alert('innerdouble');
stopBubble(e);
}
function ialertthree(e) {
alert('innerthree');
stopBubbleDouble(e);
}
function stopBubble(e) {
var evt = e||window.event;
evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//To prevent a bubble
}
function stopBubbleDouble(e) {
var evt = e||window.event;
evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//To prevent a bubble
evt.preventDefault();//Block browser default behavior so that links do not jump
}
$(function() {
//Methods a
//$('#jquerytest').click(function(event) {
// alert('innerfour');
// event.stopPropagation();
// event.preventDefault();
//});
//Method 2
$('#jquerytest').click(function() {
alert('innerfour');
return false;
});
});
</script>
<div onclick="alert('without');">without
<div onclick="alert('middle');">middle
<div onclick="alert('inner');">inner</div>
<div onclick="ialertdouble(event)">innerdouble</div>
<p><a href='http://www.baidu.com' onclick="ialertthree(event)">innerthree</a></p>
<p id='jquerytest'><a href='http://www.baidu.com'>innerfour</a></p>
</div>
</div>
</html>
When you click on inner, 'inner',' middle' and 'without' pop up in turn. This is event bubbling.
Intuitively, this is also true, because the innermost region is in the parent node, and if you click on the region of the child node, you actually click on the region of the parent node, so the event propagates.
In fact, most of the time, we don't want the event to bubble because it will trigger several events at once.
Next: we click innerdouble. You'll see that she doesn't bubble because she calls the stopBubble() method in the method ialertdouble(), which stops the bubble by determining the browser type (Ie cancleBubble(), firefox stopProgation()).
But if it's a link, we'll see that it also stops bubbling, but it jumps, which is the default behavior of the browser. You need the preventDefault() method to prevent this. See ialertthree() for details.
The current mainstream is to bind the click event with jquery, which makes it much easier.
We can pass in the parameter event when we click on the event, and then go directly
Event. StopPropagation ();
Event. The preventDefault (); // no link no need to add this.
That's it.
The framework is good, but it's even simpler to return false in an event handler, which is a shorthand way of calling both stopPropagation() and preventDefault() on an event object.
See the detailed code above, remember to load jquery.js.
You can also add a judgment to each click event:
$('#id').click(function(event){
if(event.target==this){
//do something
}
})
Resolution: the variable event in the event handler holds the event object. The event.target attribute holds the target element where the event occurred. This property is specified in the DOM API, but not implemented by all browsers. JQuery extends this event object as necessary so that it can be used in any browser. With.target, you can determine the element in the DOM that received the event first (that is, the element that was actually clicked). Furthermore, 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 when Jquery binds events.