Four ways to bind events in jquery: Bind, Live, delegate, on

1. jquery operation four ways of binding events for DOM elements

jquery provides four kinds of event monitoring methods, namely bind, Live, delegate, on, corresponding to the function of lifting the listener is unbind, die, undelegate, off.

2. Essential Basics: DOM Tree

Example, this is a simulated DOM tree in the browser environment:

　　

Our page can be understood as a DOM tree, when we do something on the leaf node (such as click an A element), if we have no artificial setting stoppropagation (Moder Browser),

cancelbubble (IE), //block propagation (modern browser), cancel bubbling (ie browser), then all its parent elements, ancestor elements will be affected, bound events will also affect them.

　　$ (' a '). bind (' click ', function () {alert ("that Tickles!")});

　　When we click a, we first trigger the Click event that it itself binds to, and then it goes all the way up, triggering its parent element, the click event of all the bindings on the ancestor element:

3. Bind

　　$ (selector). bind (Event,data,function)

Event: Events, required, one or more events; data: parameters, optional; FN: a function that executes when a binding event occurs, required.

　　Bind () is the most straightforward and longest -to-exist binding method.

Pros: This approach provides a compatibility solution for event handling in different browsers.

Cons: It will bind events to all target elements, there is a binding one, the elements on the page will not be added dynamically when the use of it is no problem.

However, if you add a "list element 5" Dynamically in the list, clicking on it is unresponsive and you must bind it once more. That is, it is not bound to those elements that are added dynamically after it finishes executing.

When there are many elements, there is an efficiency problem. You can do bind () when the page is finished loading, so you may have an efficiency problem.

4. Live

　　$ (selector). Live (event,data,function)

　　This method uses the concept of event delegates to handle the binding of events.

Pros: There is only one event binding here, binding to document instead of binding all elements like. bind ().

Those elements that are dynamically added can still trigger events that were previously bound because the actual binding of the event is on the document.

You can bind the required events before the document is ready.

5, delegate

　　$ (selector). Delegate (Childselector,event,data,function)

The Childselector:selector child element, required.

Delegate () is a bit like live (), unlike. Live (), where it does not bind all the event to document, but rather where you decide to put it.

　　Pros: You can choose to put the event on that element.

You need to iterate over all the selector/event data to determine which child element to match, but because you can decide on that root element, you can effectively reduce the element you are looking for.

Can be used on dynamically added elements.

Disadvantage: You need to find the child elements of the binding, although much less than document, but you still have to waste time to find.

6. On

In fact,. bind (),. Live (),. Delegate () are all implemented by. On (),. Unbind (),. Die (),. Undelegate (), and the same is done through. Off (),

Pros: Provides a way to unify a binding event.

Cons: It might be a bit of a problem for you because it hides the details of the three methods we've described earlier.

7. The similarities and differences and advantages and disadvantages of four kinds of methods

　　Same point: 1. Supports single-element multi-event binding, space-separated or curly-brace substitution;

2. All events are routed through event bubbling to the document for event response;

Compare and Contact:

The 1.bind () function can only set events for elements that already exist, but live (), on (), delegate () Support event settings for new additions to future elements;

2.bind () supports all versions of jquery; Live () supports jquery1.8-;delegate () support for Jquery1.4.2+;on () support jquery1.7+;

The bind () function was respected before the jquery1.7 version, and after version 1.7, the official has not recommended bind (), the substitution function is on (), and this is the newly added function of the 1.7 version.

Similarly, can be used instead of the live () function, the live () function in version 1.9 has been deleted;

The 3.live () function is similar to the delegate () function, but the live () function is less delegate () in terms of execution speed, flexibility, and CSS selector support.

8. Conclusion

The cost of using. bind () is very large, and it hooks the same event handler to all matching DOM elements. bind: bind directly to the element, there is a binding one. "

Don't use. Live () anymore, it's no longer recommended.

The. Delegate () provides a good way to improve efficiency while we can add to dynamically created elements.

　 . On () is a new event binding mechanism that incorporates the previous 3 ways, and we can use. On () instead of the 3 methods described above.

9, binding multi-event processing

Single Event handling: For example $ (selector). bind ("click", Data,function);

Multi-Event Processing:

1. Use spaces to separate multiple events, such as $ (selector). bind ("Click Dbclick mouseout", data,function);

2. Use braces to flexibly define multiple events, such as $ (selector). Bind ({event1:function, event2:function, ...})　　　　　　　　　

Space Separation Method: The binding is more rigid, can not give the event of a separate binding function, suitable for handling multiple events call the same function case;

Brace substitution: Binding is more flexible and can be used to bind functions to events individually.

Reference documents:

Http://www.cnblogs.com/xilipu31/p/4105794.html

http://blog.csdn.net/panfang/article/details/21705681

Http://www.cnblogs.com/piercalex/archive/2013/03/30/2990679.html

Http://www.51edu.com/it/bckf/35687.html

　　

Four ways to bind events in jquery: Bind, Live, delegate, on