JQuery's. on () method

It's not completely clear how to use. on () for jQuery event binding first look at the http://api.jquery.com/on/ here

JQuery binds events in several ways. We recommend that you bind events using the. on () method for two reasons:

1. The on () method can bind events dynamically added to page elements.

For example, when a DOM element is dynamically added to a page, events bound using the. on () method do not need to worry about when the elements registered for this event are added or need to be bound repeatedly. Some may be used to it. bind (),. live () or. delegate (), view the source code and you will find that they actually call all of them. on () method, and. the live () method has been removed in jQuery1.9.

bind: function( types, data, fn ) {    return this.on( types, null, data, fn );},live: function( types, data, fn ) {    jQuery( this.context ).on( types, this.selector, data, fn );    return this;},delegate: function( selector, types, data, fn ) {    return this.on( types, selector, data, fn );}

Remove events bound to. on () using the. off () method.

2. Bind events using the on () method to improve efficiency

Many articles have mentioned how to use event bubbles and proxies to improve the efficiency of event binding. Most of the differences are not listed. Therefore, I will perform a small test to verify the difference.

Assume that 5000 li is added to the page and the page loading time is tested using the chrome developer tool Profiles.

Normal binding (this is what we call it)

$('li').click(function(){    console.log(this)});

Binding process execution time

Binding process execution time