What is event bubbling in jquery

Bubbling events mean that after an event occurs, the browser usually first triggers the event handler on the element where the event occurred, then its parent element, the parent element's parent element...and so on, until the document to the root element. Bubbling events are the most common way of event propagation; after processing an event, if you want to stop the propagation of the event and do not want it to continue bubbling, you must bind the event processing method.

The operating environment of this tutorial: windows7 system, jquery3.6.1 version, Dell G3 computer.

What is event bubbling

The bubbling event is that if a certain type of event is triggered on an object, then the event will Propagates to the parent and triggers similar events defined on the parent object. The direction of event propagation is from the bottom to the top, similar to water bubbles rising from the bottom of the water.

An HTML document can visualize a DOM tree:

Then the event bubbling phenomenon can be vividly expressed as the following figure:

Simply put:

After an event occurs, the browser usually triggers the event handler on the element where the event occurred first, then its parent element, the parent element's parent element... …and so on, up to the root element of the document.

This is called event bubbling and is the most common way for events to propagate. After handling an event, you may want to stop the propagation of the event and do not want it to continue to bubble up. It is necessary to bind the processing method of the event.

As shown above, set a click event for them. When the button is clicked, the click event of the button is triggered, and the corresponding parent element div is triggered to click. event, then trigger the body to trigger the event, and so on until the document or window.

Bubbling examples

Procedure:

Effect:

When you click on the red box where three is located, the pop-up box three will appear. After confirmation, the pop-up box two will appear and then the pop-up box one will appear.

When you click on the yellow box where two is located, the pop-up box two will appear, and then the pop-up box one will appear.

When you click the green box where one is located, only the pop-up box one appears.

That is, bubbling occurred in the first two situations.

If someone says it is caused by the order of the click events being written, it is not the case. They are all executed after the document is loaded.

Methods to prevent bubbling:

If you want to prevent subsequent bubbling after clicking two, add the following

Then the pop-up box two will no longer appear in the pop-up box one.

jquery prevents event bubbling examples

1. Cancel the default behavior and prevent event bubbling by returning false.

jQuery Code:

$("form").bind(
　　"submit", 
　　function() { 
　　　　return false;
　　 }
);

2. Only cancel the default behavior by using the preventDefault() method.

jQuery Code:

$("form").bind(
　　"submit", 
　　function(event){
　　　　　　event.preventDefault();　　
　　}
);

3. Only prevent one event from bubbling by using the stopPropagation() method.

jQuery code:

$("form").bind(
　　"submit", 
　　function(event){
　　　　　　event.stopPropagation();　　
　　}
);

[Recommended learning: jQuery video tutorial, web front-end video]

The above is the detailed content of What is event bubbling in jquery. For more information, please follow other related articles on the PHP Chinese website!