jquery's Click, Bind, delegate, off, unbind

. Click and . Bind

. Click and. Bind are all binding events to each element, and for binding only one click event, the shorthand for the. Bind event is. Click That way.

There are two problems in both of these ways:

The first problem, if you want to bind a lot of events, such as to bind 100 elements, to bind 100 times, for a large number of elements, affecting the performance. But if the ID selector, because the ID is unique, with the bind () method is very fast.
The second problem is that you cannot bind to an element that does not already exist. Adding a SPAN element dynamically, clicking on the span element will find no action response.

Then you ask, why does it appear. bind () This event?

. Bind () can add more than one event at a time.

You add a lot of events to an element at once, the. Unbind () event is unbound and can be selectively unbound.

For example, a button that you click upon to submit to the background and so on returns the result that you don't want it to be clicked again, but it has other effects and you need to unbind it.

You can also name the bound event. Bind ("Mouseover.plugin" function () {})

Unbind (". Plugin") when unbinding;

Unbind ("mouseover!") Add! Matches all mouseover events that do not contain namespaces

. Click and. Bind with. Delegate

This effect is the same as the normal binding event and the on Delegate event effect.

This approach employs the concept of event delegation. Instead of binding an event directly for the BTN3 element, it binds the event to its parent element (or ancestor element), and when clicked on any element within the parent element, the event bubbles up from the event target, until it reaches the element that you are binding the event to. During bubbling, code is executed if the currenttarget of the event matches the selector.

This solves the use. The above two problems of the Click (), Bind () method do not have to go through the binding event for the BTN element, or bind the BTN element that is added dynamically. Even if you bind the event to a document, you do not have to wait for the document to be ready to execute the binding.

This way, binding is easy, but there may be problems when calling. If the event target is in a deep position in the DOM tree, this layer bubbles up to find the element that matches the selector, and it affects performance.

. Bind and. Delegate can bind multiple events at the same time.

. Delegat and . on

The effect of the two functions is the same, previously did not open on, only bind,click,live,delagate, they are all through the implementation of, after the live deleted, put on directly open for use. But why not just delete the. Delegate, you don't know, you can tell me.

The. Delegate and. On still have some subtle differences:

The position of the parameter is not quite the same.

For their unbind/dismiss the delegate

Click and bind with Unbind to unbind, delegate and on are the corresponding cancellation of the delegate, if you want to directly unbind an element of an event, then you use the ID selector good ~, a separate element such a cancellation of the delegate can not Oh!

This uses the class to dismiss the delegate

Summarize:

① selectors are matched to more elements without click and bind, with delegate and on, adding efficiency and adding elements dynamically. Note that the DOM tree is not too deep and the parent element is selected properly. JQ version to be high

When the ② selector matches elements, you can use Click and bind. JQ Low Version Support

In summary, the current use on the right.

jquery's Click, Bind, delegate, off, unbind