What are the differences between bind(), one(), on(), and live() binding event functions in jQuery?

1. bind() method

Bind an event handler function to the specific event of each matching element. The underlying logic of the bind() method is the on() method. The
.bind() method is the primary way to attach behavior to a document. All JavaScript event objects, such as focus, mouseover, and resize, can be passed in as the type parameter.
Example:
.bind() The most basic usage is:

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});

This code enables the element with ID foo to respond to the click event. When the user clicks inside the element, a warning box will pop up.

2. on() method

Bind the event handler function of one or more events to the selected element.
The on() method binds an event handler to the element in the currently selected jQuery object. In jQuery 1.7, the .on() method provides all the functionality needed to bind event handlers.

Parameter description:
events: One or more event types separated by spaces and an optional namespace, such as "click" or "keydown.myPlugin" .
selector: A selector string for the descendants of the selector element that triggers the filter event. If the selected data: When an event is triggered, event.data must be passed to the event processing function.
fn: Function executed when this event is triggered. The false value can also be used as a shorthand for a function that returns false.

3. One() method

Binds a one-time event handler function to a specific event (like click) of each matching element.
On each object, this event handler will only be executed once. Other rules are the same as bind() function. This event handler will receive an event object, which can be used to prevent the default behavior. If you want to cancel the default behavior and prevent the event from bubbling, the event handler must return false.

Parameter description:
type: One or more events added to the element. Multiple events separated by spaces. Must be a valid event.
data: The data mapping to be passed to the event processing function
fn: The function that is executed whenever the event is triggered.

4. Live() method

jQuery attaches an event handling function to all matching elements, it is valid even if this element is added later.

This method is basically a variant of the .bind() method. When using .bind(), elements matched by the selector will have an event handler attached to them, while elements added later will not. You need to use .bind() again for this.
Event Delegation: The
.live() method can be effective for an element that has not been added to the DOM because of the use of event delegation: the event processing function bound to the ancestor element can Respond to events triggered on descendants. The event handler passed to .live() will not be bound to the element, but will be treated as a special event handler and bound to the root node of the DOM tree.
Additional Notes:
.live(), although useful, cannot simply replace .bind() in any case due to its special implementation. The main differences are:

1. In jQuery 1.4, the .live() method supports custom events and all JavaScript events. In jQuery 1.4.1, there is even support for focus and blur events (mapped to the more appropriate, bubbling focusin and focusout). In addition, in jQuery 1.4.1, hover (mapped to "mouseenter mouseleave") is also supported. However, in jQuery 1.3.x, only supported JavaScript events and custom events are supported: click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.

2. .live() does not fully support elements found through DOM traversal. Instead, you should always use the .live() method directly after a selector, as mentioned in the previous example.

3. When an event handling function is bound with .live() and you want to stop executing other event handling functions, then this function must return false. Simply calling .stopPropagation() will not accomplish this.

Special Note:

Starting from jQuery 1.7, the .live() method is no longer recommended. Please use .on() to add event handling.

The above is the detailed content of What are the differences between bind(), one(), on(), and live() binding event functions in jQuery?. For more information, please follow other related articles on the PHP Chinese website!