First, as you all know, the jquery event triggers 2 mechanisms, one is the event delegate, the other is event bubbling (ie is not considered for the moment). To take the Click event as an example, attach a code first:
Html:
<body>
<div id= "box" >
<p id= "BTN" > I am the button </p>
</div>
</body>
style:
. hid{
Display:none;
Script
$ (' #box '). Click (function () {
$ (' #btn '). Toggleclass (' hid ');
}
$ (' #btn '). Click (function () {
alert (' btn ');
})
This code is meant to be, when I click on the #btn, I'm going to alert out the "BTN" string, and when I click on #box, I'm going to hide #btn, but when I click on the btn when I actually do it, he executes the BTN event first, then the box event, Which is alert first, then hidden. With what we want to do, how do we solve this problem, here we have to think of the mechanism of event bubbling, because when I click BTN, the event bubbles up to the parent element until the document object.
1.7 (remember correctly) after the jquery version, the. On () event is used to handle the events of the binding element, where we can use the. On () event and the Stoppropagation () method to block event bubbling:
$ (' #box '). On (' Click ', ' #btn ', function (e) {
e.stoppropagation ();
alert (' btn ');
})
$ (' #box '). Click (function () {
$ (' #btn '). Toggleclass (' hid ');
}
Here I first bind the #btn event with on, so that when I click on the Btn button, alert (' btn '), but because I e.stoppropagation () prevents the event from bubbling, it does not trigger the Toggleclas event; box, the normal Toggleclass event is triggered;
Think about it here, if not. On () How to solve, similar to the native JS, with AddEventListener listener Click Target, the code is not complex:
$ (' #box '). Click (function (e) {
if (E.target = = this) {
$ (' #btn '). Toggleclass (' hid ');
}
)
$ (' #btn '). Click (function () {
alert (' btn ');
})
In this way, you can stop the event bubbling up.
Of course, event bubbling is not all side effects, the other thing we're going to talk about is the event delegate, the event delegate, which is based on event bubbling, like the example above, where you can assume that there are many elements between #btn and #box, when I want to click on the innermost #btn, To trigger his corresponding event, you can click on its peripheral elements and then determine if the clicked is the target element, that is, btn, and if so, the event that triggers the BTN is actually the above. On () This example can be written as:
$ (' body '). On (' Click ', ' #btn ', function (e) {
alert (' btn ');
})
Delegate the BTN event to the click Body to handle it.
Finally, a careful analysis, in fact, event delegation and event bubbling, logically thinking is nothing more than 2 opposite direction in the implementation. An event delegate is actually an event capture process that can be viewed as a process that is captured from the outside to the inside, and event bubbling is the process of bubbling from the inside out.
The blocking and permitting of the bubbling events of jquery (three methods of implementation)
Bubbling or default events, which are not needed at some point, require a few ways to block bubbling and default events, and this article describes three ways to prevent it to varying degrees, and interested friends can understand it and perhaps help you understand the bubbling event.
Sometimes we don't want bubbles or default events to happen, so we need some jquery methods to block bubbles and default events.
There are three ways to prevent this from being different.
A:return False--->in event handler, prevents default behavior and event bubbing.
return false in the handling of an event, you can block default events and bubbling events.
B:event.preventdefault ()---> in event handler, prevent default event (allows bubbling).
Event.preventdefault () in the handling of events, you can block the default event but allow bubbling events to occur.
C:event.stoppropagation ()---> in event handler, prevent bubbling (allows default behavior).
Event.stoppropagation () in the handling of events, you can block bubbles but allow default events to occur.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
