嘿, 我是Mofei!
jQuery's New Event Binding Mechanism on()

Today, while browsing the deprecation list of jQuery, I found that live() and die() are on it. So I quickly took a look and found that starting from jQuery 1.7, jQuery introduced a completely new event binding mechanism where the on() and off() functions unify the handling of event bindings. Before this, there were methods like bind(), live(), and delegate() to handle event binding. jQuery decided to launch new functions to unify the event binding methods and replace the old methods, considering performance optimization and uniformity.

on(events,[selector],[data],fn)

events: One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
selector: A selector string for filtering the descendant elements of the selected elements that trigger the event. If the selector is null or omitted, the event always triggers when it reaches the selected element.
data: Data passed to the event handler as event.data when an event is triggered.
fn: The function executed when the event is triggered. The false value can also serve as a shorthand for a function returning false.

Replacing bind()

When the second parameter 'selector' is null, on() and bind() are practically the same in usage, so we can consider on() as simply having an additional optional 'selector' parameter, making it very convenient to replace bind().

Replacing live()

Before 1.4, I believe everyone really liked using live(), as it could bind events to both current and subsequently added elements. Of course, after 1.4, delegate() can also do similar things. The principle of live() is quite simple; it delegates events through the document. Therefore, we can also use on() by binding events to the document to achieve the same effect as live().
live() syntax

$('#list li').live('click', '#list li', function() {
  // function code here.
});

on() syntax

$(document).on('click', '#list li', function() {
   // function code here.
});

The key here is that the second parameter 'selector' is functioning. It acts as a filter, and only descendant elements of the selected element will trigger the event.

Replacing delegate()

delegate() was introduced in 1.4 with the aim of handling the event binding of descendant elements through ancestor elements, somewhat similar to the advantages of live(). The only difference is that live() delegates through the document element, while delegate can use any ancestor node. The syntax for using on() to implement delegation is basically the same as that of delegate().
delegate() syntax

$('#list').delegate('li', 'click', function() {
   // function code here.
});

on() syntax

$('#list').on('click', 'li', function() {
  // function code here.
});

It seems that the order of the first and second parameters has been reversed, but the others are basically the same.

Summary

The purpose of jQuery launching on() is twofold; first, to unify the interface, and second, to improve performance. So from now on, use on() to replace bind(), live(), and delegate. Most importantly, stop using live() as it is on the deprecation list and could be removed at any time. If you just want to bind an event once, then continue using one(); this hasn't changed.

THE END

More Articles You Might Be Interested In

Your comment might help others too—feel free to share your thoughts!

avatar

Mofei's Friend (Click to edit)

I heard leaving a comment here is pretty cool.

HI. I AM MOFEI!

NICE TO MEET YOU!