Common events for jquery and on delegate events

Take the Click event as an example:

Normal bind event: $ ('. btn '). Click (function () {}) Binding

On binding event: $ (documnet). On (' Click ', ' btn2 ', function () {})

So what is the difference between the two ways?

Let's say the difference in one example

The ①click event is an element that gets all the classes named BTN1 after the page is loaded, and then binds the click event, and if you regenerate the BTN1 element by another operation, it does not have the Click event;

② and on () events play a listening effect, you can implement Dynamic HTML element binding, such as the beginning of a BTN2 element, you have a way to add a BTN2 element, this element can be clicked, you can add unlimited btn2.

So how to implement this dynamic monitoring process?

The On () event is equivalent to $ (document). Click (function () {if (click Btn) {}}), add a click event to the document, the party clicks on the BTN, the event bubbling principle, from inside to outside, The equivalent of clicking on document, the subsequent action is performed, essentially adding only one event to the document, and the Click () event adds the Click event to all btn.

Additionally the on () event can add multiple events.

The advantages of the On () delegate event: The original event binding, to bind a lot of events, now only need to bind an event, greatly improve the efficiency and page performance, solve the dynamic addition of elements resulting in a bug that cannot be triggered.

Reproduced

Common events for jquery and on delegate events