jquery event bindings. On () Brief overview and application

Article reprint:http://www.jb51.net/article/33880.htm

A few days ago in the "Basic jquery Tutorial", see the event delegate time, about the live () method is not very detailed, went to search about Live () and delegate ().

Then saw live in one place () has been removed, embarrassed, and then went to see the latest JQ source code, sure enough to be removed, is now 1.9.1 version, do not know which version of Live () was removed before, ashamed Ah, did not notice.

See the source code found that bind () and delegate () are implemented by on (). The description of On () is as follows:

. On (events [, selector] [, data], handler (EventObject))

A simple event binding such as $ (' button '). On (' click ', Function () {}); and bind () no two.

When you need to bind events to more elements, the priority is given to event delegation, which can bring a performance benefit. Like what:

For example, if the Click event is bound to a Document object, the click event of any element on the page bubbles to the Document object for processing.

Notice the Second optional parameter in the description of. On (): selector. For example, add the second parameter, the selector button:

Results:

When the event bubbles to the Document object, the target of the detection event, if matched with the incoming selector (this is the button), triggers the event, otherwise it is not fired.

Note. On () can also receive an object parameter, the property of which is the event type, and the property value is the event handler function. Here is an example of an official document:

Finally, the original Live () method, the handler function is the default binding on the Document object can not be changed, if the DOM nesting structure is very deep, event bubbling through a large number of ancestor elements will lead to a large performance loss. Using .on() methods, events are bound only to $() elements that match the selector expression of the function (in my example above, in order to simply bind to document), you can pinpoint a portion of the page, and the overhead of event bubbling can be reduced. Delegate () and on () are, after all, implemented with on ():

Article reprint: http://www.jb51.net/article/33880.htm

jquery event bindings. On () Brief overview and application