JQ in Bind (), Live (), delegate () event method difference

The jquery team released a new method for binding events in version 1.7 called on. This method contains the features of live, bind, and delegate described below, allowing us to specify the way to bind events by passing different parameters rather than through different method names.

Basic knowledge

Definitions and usage

The bind () method adds one or more event handlers for the selected element and sets the function to run when the event occurs.

To bind events and functions to an element
Specify one or more event handlers to be added to the selected element, and the function to run when the event occurs.

Grammar

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

Cases

$ ("button"). Bind ("click", Function () {
$ ("P"). Slidetoggle ();
});

The live () method attaches one or more event handlers for the selected element, and provides a function to run when these events occur.

Event handlers that are attached through the live () method apply to the current and future elements of the matching selector, such as the new element created by the script.

Grammar
$ (selector). Live (Event,data,function)

Cases

$ ("button"). Live ("Click", Function () {
$ ("P"). Slidetoggle ();
});

.delegate (selector, EventType, handler)
Selector selector string for the element that the filter triggers the event.

EventType A string that contains one or more JavaScript event types, such as "click" or "KeyDown," or the name of the custom event.

Handler the function that executes whenever an event is triggered.

.delegate (selector, EventType, EventData, Handler)
The selector selector string that is used to filter the element that triggers the event.

EventType A string that contains one or more JavaScript event types, such as "click" or "KeyDown," or the name of the custom event.

Event bubbling (event delivery)

When we click on a link, the link element emits a Click event that triggers the method that binds to the element click event.

$ (' a '). bind (' click ', function () {alert ("that Tickles!")}); As the above code, the link clicks will trigger an alert.

The Click event is passed up to the parent element along the tree, and events that are triggered on all child elements are passed up the tree until the root element.

In the DOM operation of HTML, the document is with the node.

Now let's look at the difference between. bind (),. Live (), and. Delegate ().

. Bind ()

$ (' a '). bind (' click ', function () {alert ("that Tickles!")}); This is the most direct way to bind event handling. jquery traverses all the $ (' a ') elements in the document and binds the click event of each element to the alert method.

. Live ()

$ (' a '). Live (' click ', function () {alert ("that Tickles!")}); jquery bind the alert method on the $ (document) element, while the ' click ' and ' a ' are used as arguments. When an event is passed to the document node, the node verifies that the event type matches the target element type of the event to the selector ' a '. If the test passes then the alert method is executed.

In addition to the Document,live method, you can bind the method to the specified element as follows:

The code is as follows	Copy Code
$ (' A ', $ (' #container ') [0]). Live (...); Delegate ()

$ (' #container '). Delegate (' A ', ' click ', function () {alert ("that Tickles!")}); The jquery traversal document retrieves the $ (' #container ') element and binds the alert method to both the Click event and the ' a ' selector as arguments. When an event is passed to $ (' #container '), it verifies that the event type is click and that the target element matches the ' a ' selector. The method is executed if the test is passed.

Note that this method is similar to. Live (), and they differ in that. The delegate () method binds a method to a specific element and. Live () is bound to the document root element. Maybe we'll ask if it's $ (' a '). Live () = = $ (document). Delegate (' A ')? The answer is not exactly the same.

Why. Delegate () more recommended than. Live ()

The delegate method of jquery has the following advantages over the live method.

The code is as follows	Copy Code
$ (' a '). Live (' click ', function () {blah ()}); or $ (document). Delegate (' A ', ' click '), function () {blah ()});

Speed

The method effect of the previous two binding events is the same. But the second approach is faster than the first in execution. Because the first method needs to retrieve all the $ (' a ') elements from the document node and save the elements as jquery objects. Although the live method only needs to use the passed selector ' a ' to verify which events need to be handled, the $ () method does not know what the following method is. Live ().

The delegate method finds and saves only the $ (document) element.

Flexibility and code continuity

Live is more complicated than that. Because although it is connected to the $ (' a ') object, it actually works on the $ (document) object. Because of this, the approach that follows it is difficult to understand. The use of $.live (' a ',...) is more recommended in practical applications To bind to the specified element.

Only CSS selectors can be used

The biggest disadvantage of the live method is that it can only be manipulated directly using CSS selectors, which makes this method very inflexible in use.

Disadvantages of CSS selectors reference exploring jQuery. Live () and. Die ().

Why the use of. Live () or. Delegate () is recommended instead of. Bind ()

From this point of view it seems that the bind method is more explicit and straightforward, but consider the following two points we prefer to use the live and delegate methods:

• Bind event methods for DOM elements that do not yet exist. Because bind directly binds a method to a separate element, it cannot bind the method to an element that does not exist on the page. So if we execute $ (' a '). Bind (...), those links that are added to the page after Ajax are not bound. While the live and delegate methods bind an event method to a specified parent node, the event of an existing element or an element that is added after that node can be processed.
• Listen to all of their child elements for individual elements or a set of element binding methods without having to bind the same method to each individual DOM element by looping. It is much more efficient to bind a method to one or a group of parent elements than to bind the method directly to each element on the page.
Terminate event Delivery

Finally, there is a need to warn about terminating event delivery, and we can usually avoid other event-handling methods by terminating event delivery:

The code is as follows	Copy Code
$ (' a '). bind (' click ', Function (e) {e.preventdefault ();//or E.stoppropagation ();});

However, when we use the live or Delegte method, the event-handling method does not actually run until the event is passed to the bound element, when the event method bound by the. bind () is actually running