JQuery new event binding mechanism on of example application

Today, I went through jQuery's deprecated list and found live() and die() in it. I took a quick look and found that since jQuery1.7, jQuery has introduced a new event binding mechanism, with on() and off() functions handling event binding. Since there were bind(), live(), delegate() and other methods to handle event binding, jQuery decided to introduce new functions to unify the event binding methods and replace the previous methods in terms of performance optimization and unified approach.

On (the events, the selector, [data], fn)

Events: one or more space-separated event types and optional namespaces, such as "click" or "keydown.myplugin".

Selector: a selector string used as a descendant of the selector element of the filter's trigger event. If the selector is null or omitted, the event always fires when it reaches the selected element.

Data: when an event is triggered, event.data is passed to the event handler.

Fn: the function that executes when the event is triggered. The value false can also be shorthand for a function that returns false.

Replace the bind ()

When the second argument 'selector' is null, on() and bind() are essentially the same in terms of usage, so we can assume that on() is just an optional 'selector' argument more than bind(), so on() is a convenient way to replace bind()

Replace the live ()

Before 1.4, you liked live() because it bound events to the current and future elements, and after 1.4, the delegate() could do the same thing. The principle of live() is simple. It delegates events through a document, so we can also use on() to achieve the same effect as live() by binding events to a document.

Live () method

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

On (the) way

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

The key here is that the second argument 'selector' is in play. It ACTS as a filter, and only children of the selected element will trigger the event.

Replace the delegate ()
Delegate () was introduced in 1.4 to delegate the issue of event binding to descendant elements via the ancestor element, somewhat like live(). It's just that live() is delegated by the document element, and the delegate can be any ancestor node. The proxy written using on() is basically the same as the delegate().

The delegate () method

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

On (the) way

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

It looks like the order of the first argument and the second argument is reversed, everything else is basically the same.

conclusion

JQuery introduced on () for two purposes, one to unify the interface, the other to improve performance, so from now on () instead of bind (), live (), delegate. In particular, don't use live() anymore, because it's already on the unrecommended list, and it could get killed at any time. If you only bind the event once, then go with one(), which doesn't change.