JS event bubbling and event delegation

JS so-called event bubbling is a child element of an event is triggered, its ancestor element of the event is also executed recursively

Html:

1 2     3     4     5     6     7     8     9     Ten </ul>

Js:

1 $ ("ul[data-type= ' Citypick ')"). On (' click ',function2     alert ("Parent element ul is clicked"  34 $ ("ul[data-type= ' Citypick ')". On (' Click ', ' li ',function   5     Alert ("sub-element li is clicked"6 });

When Li's Click event is triggered, the parent UL's Click event is also triggered to execute,

And on some occasions we do not want it to bubble, how to do it? Simple!

Js:

1 $ ("ul[data-type= ' Citypick ')"). On (' click ',function2     alert ("Parent element ul is clicked"  34 $ ("ul[data-type= ' Citypick ')". On (' Click ', ' li ',function   5     e.stoppropagation ();  6 alert ("sub-element Li is clicked" 7});      

Plus e.stoppropagation (); This sentence will stop the event bubbling.

JS Event Delegate

JS event delegate, in fact, using the principle of bubbling, starting from the clicked element, recursively propagate events to the parent element, the advantage is that for a large number of elements to be processed, do not have to bind to each element of the event, only need to be tied to their parent element once, to improve performance. Another benefit is that you can handle elements that are inserted dynamically into the DOM, and the way you bind directly is not possible.

Is that the event target itself does not handle the event, but instead delegates the processing task to its parent element or ancestor element, and even the root element event delegate is well utilized for "event bubbling". When the child element is clicked, according to "event bubbling", the child element's parent element captures the Click event and triggers its own method.

See Example:

If there are now 10 buttons, to bind a click event for each button, maybe only 10 buttons, you can bind by one or loop, but what about performance?

Html:

1<div class= "Button-group" >2<bottoun type= "button" class= "BTN" > Submit </bottoun>3<bottoun type= "button" class= "BTN" > Submit </bottoun>4<bottoun type= "button" class= "BTN" > Submit </bottoun>5<bottoun type= "button" class= "BTN" > Submit </bottoun>6<bottoun type= "button" class= "BTN" > Submit </bottoun>7<bottoun type= "button" class= "BTN" > Submit </bottoun>8<bottoun type= "button" class= "BTN" > Submit </bottoun>9<bottoun type= "button" class= "BTN" > Submit </bottoun>Ten<bottoun type= "button" class= "BTN" > Submit </bottoun> One<bottoun type= "button" class= "BTN" > Submit </bottoun> A</div>

Js:

$ (". Button-group"). On (' click ', '. btn ',function() {      alert ("$ (this). html ());});

As you can see here, we are only binding the Click event for a parent of all buttons, rather than binding events for all the buttons, greatly improving performance, and the benefits of being able to handle dynamically added elementsThere is a button in the original DOM is not, you add in other ways, that is, the future element, with the direct binding method is not successful, only with the event delegate, delegate to the parent of the element to handlebecause event delegates are implemented through event bubbling, event delegation is also invalidated if the elements of the child block the event bubbling! In fact, the Jqueryjquery 1.7 Beta 1 version provides the. bind (),. Live (), and. Delegate () Methods for binding and delegate events , which can be said to be step-by-step improvements,

JS event bubbling and event delegation