jquery new event binding mechanism on () example app

Submission: Whsnow font: [Increase decrease] Type: Reprinted starting from jQuery1.7, jquery introduced a new event binding mechanism, on () and off () two functions uniformly handle event binding, the following examples for you to introduce the next

Today I browsed the list of deprecated in jquery, found that live () and Die () in the inside, hurriedly looked at, found that starting from jQuery1.7, jquery introduced a new event binding mechanism, on () and off () two functions uniformly handle event binding. Because prior to this there were bind (), Live (), delegate () and other methods to handle event binding, jquery decided to introduce new functions to unify the event binding method and replace the previous method from performance optimization and unified approach.

On (EVENTS,[SELECTOR],[DATA],FN)

Events: One or more space-delimited event types and optional namespaces, such as "click" or "Keydown.myplugin".

Selector: A selector string is used for the descendant of the selector element of the filter's triggering event. If the selector is NULL or omitted, the event is always triggered when it reaches the selected element.

Data: Pass Event.data to the event handler when an event is triggered.

fn: The function that is executed when the event is triggered. A false value can also be a shorthand for a function that returns FALSE.

Replace bind ()

When the second argument ' selector ' is null, the on () and bind () are basically no different in usage, so we can assume that on () is only an optional ' selector ' argument over bind (), so on () can be very convenient to replace the bind ()

Replace Live ()

Before 1.4 It was believed that you would like to use Live () because it could bind events to the current and later added elements, of course, after 1.4 delegate () can do similar things. The principle of live () is simply that it is delegated through the document, so we can also use on () to achieve the same effect as live () by binding events to document.

Live () notation

?

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

On () notation

?

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

The key here is that the second parameter ' selector ' is working. It is the function of a filter that only the descendant elements of the selected element will trigger the event.

Replace delegate ()
Delegate () was introduced in 1.4 to delegate the event-binding of descendant elements through ancestral elements, in a way similar to the benefits of live (). Only Live () is delegated through the document element, while delegate can be an arbitrary ancestor node. Use on () to implement the proxy notation and delegate () basically consistent.

The wording of delegate ()

?

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

On () notation

?

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

It seems the order of the first and second arguments is reversed, the other is basically the same.

Summarize

jquery launches on () for the purpose of 2, one for the unified interface, and two for improving performance, so from now on () Replace bind (), Live (), delegate bar. In particular, do not use Live (), because it is already in the deprecated list, can be killed at any time. If you only bind an event, then use one (), which does not change.

jquery new event binding mechanism on () example app