About event bubbling and event delegation

Take the following code as an example:

<div>

<a></a>

</div>

Suppose there's a mouseout event on the Div.

In short, event bubbling is when the mouse is mouseout in the area of a, and the event is spread out from layer to layer, triggering the Mouseout event of the Div.

The event delegate is a feature that exploits event bubbling. Take the following code as an example:

<div id= "#switch" >

<button id= "BTN1" ></button>

<button id= "BTN1" ></button>

<button id= "BTN1" ></button>

</div>

Assuming that each button has a binding event response, it is not possible for each button to write $ ("Buttoni") if there are 10 buttons. Click (function () {

});

You can then delegate the event to the outer div by binding the Click event to the Div, such as the following code:

$ ("#switch"). Click (Function (event) {//event refers to the object that is actually clicked

if ((Event.target). Is (' button ') {//note. Using target to find the event target is often required to receive the innermost element of the event.

Determine what the ID is and implement the response

}

});

Here as a small supplement: Mouseout and MouseOver will have bubbling events, and MouseLeave and MouseEnter do not, only the specific specified elements will respond to the event.

About event bubbling and event delegation