Introduction to event bubbling usage example of event object e in jQuery_jquery

I didn't see the concept of event objects when I checked the manual before. What I wanted to achieve at that time was to click on a text box to display a drop-down multiple selection box. When the text box loses focus, the blur event is triggered, thereby hiding the drop-down box. But when I want to select the multi-select box, it will be hidden and I can't select it. This makes me very depressed. After checking the information for a day, I finally got out of focus. I found an event bubbling thing on the Internet, and found that I can achieve this function by clicking on it.

e.stopPropagation() prevents events from bubbling

Copy code The code is as follows:

We will see a situation like this: span alert -> td alert -> table alert. This is called event bubbling. That is, from bottom to top, from inside to outside, events are triggered in sequence. The conditions that can be triggered sequentially are multiple nested tags with the same event. All events will occur simultaneously and simultaneously, and the response to the same event will be realized from the inside out.

What should we do if we don’t want events to bubble up?

Copy code The code is as follows:

When I implement the click event for the entire document, I can prevent the event from happening to the text box and drop-down box. Bubble, so that when you click on them again, the document will not trigger the event.

If you want to obtain event-related information, you need to add an e object to the knowledge method, and e is the event object.

e.preventDefault() prevents event default behavior.

Copy code The code is as follows:

$("a").click(function (e ) {
alert("Default behavior is prohibited");
e.preventDefault();
});
Test

return false is equivalent to calling e.preventDefault() and e.stopPropagation() simultaneously

return false In addition to preventing the default behavior, Also prevents events from bubbling up. If you have a jquery source code, you can check the following code:

Copy the code The code is as follows:

if (ret===false){
Event.preventDefault();
event.stopPropagation();
}