Summary of event binding in Jquery

Foreword

Because jquery is often used to add and delete dom elements in projects, so the binding event method of dom elements will be involved. Let’s briefly summarize the differences between bind, live, delegate, and on for future reference. I hope this article can help friends in the future. If there is anything wrong, I hope to point it out and communicate.

一.bind()

Brief description

bind() adds one or more event handlers to matching elements.

Usage

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

event: required; one or more events added to the element, such as click, dblclick, etc.;

Single event processing: such as $ (selector).bind("click",data,function);

Multiple event processing: 1. Use spaces to separate multiple events, such as $(selector).bind("click dbclick mouseout",data,function);

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

3. Space separation method: Binding is relatively rigid and cannot bind events individually. Defined function, suitable for handling multiple events calling the same function;

braces alternative: binding is more flexible, and functions can be bound to events individually;

data: optional; parameters that need to be passed;

function: required ; When the binding event occurs, the function that needs to be executed;

Applicable to Jquery version

Applicable to all versions, but according to the official website, since jquery1.7 version, the bind() function is recommended to be replaced by on().

2.Live()

Brief description

live() adds one or more event handlers to the current or future matching elements;

Usage

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

event: required; one or more events added to the element, such as click, dblclick, etc.;

Single event processing: such as $(selector).live("click",data,function);

Multi-event processing: 1. Use spaces to separate multiple events, such as $(selector).live("click dbclick mouseout",data,function);

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

3. Space separation method: Binding is relatively rigid and cannot bind functions to events separately. It is suitable for handling multiple events calling the same function;

Braces Alternative method: Binding is more flexible and you can bind functions to events separately;

data: optional; parameters that need to be passed;

function: required; functions that need to be executed when the binding event occurs;

Applicable to Jquery Versions

jquery1.9 and below are supported. jquery1.9 and above have deleted this method. jquery1.9 and above use the on() method instead.

Three.delegate()

Brief description

delegate() adds one or more event handlers to the specified element (child elements of the selected element) and specifies functions to run when these events occur. Event handlers using the delegate() method work on current or future elements (such as new elements created by scripts).

Usage

$(selector).delegate(childSelector,event,data,function)

childSelector: required item; element that needs to add event handler, usually a child element of selector;

event: required item; One or more events added to the element, such as click, dblclick, etc.;

Single event processing: such as $(selector).delegate(childselector, "click", data, function);

Multiple event processing: 1. Utilize Separate multiple events with spaces, such as $(selector).delegate(childselector,"click dbclick mouseout",data,function);

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

3. Space separation method: Binding is relatively rigid and cannot bind functions to events separately. It is suitable for handling multiple events calling the same function;

Braces alternative method: Binding is more flexible and you can bind functions to events separately;

data: optional; parameters that need to be passed;

function: required; when the binding event occurs, the function that needs to be executed;

Applicable to Jquery version

jquery1.4.2 and above;

IV.on()

Brief description

on() adds one or more event handlers to the specified element and specifies the function to run when these events occur. Event handlers using the on() method work on current or future elements (such as new elements created by a script).

How to use

$(selector).on(event,childselector,data,function)

event: required; one or more events added to the element, such as click, dblclick, etc.;

Single event processing: For example $(selector).on("click",childselector,data,function);

Multiple event processing: 1. Use spaces to separate multiple events, such as $(selector).on("click dbclick mouseout",childseletor,data ,function);

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

3. Space separation method: binding It is relatively rigid and cannot bind functions to events separately. It is suitable for handling multiple events calling the same function;

Braces alternative: binding is more flexible and functions can be bound to events separately;

childSelector: optional; the element that needs to add an event handler, usually a child element of the selector;

data: optional; the parameters that need to be passed;

function: required; the function that needs to be executed when the binding event occurs ;

Applicable to Jquery version

jquery1.7 and above; jquery1.7 version is used to replace the bind(), live() binding event method after the emergence;

5. The similarities, differences, advantages and disadvantages of the four methods

Same points:

1. Both support the binding of single elements and multiple events; space separation method or brace replacement method;

2. Both pass events to the document for event response through event bubbling;

6. Comparison and connection:

1. The bind() function can only set events for existing elements; but live(), on(), and delegate() all support event settings for newly added elements in the future;

2. The bind() function was relatively popular before jquery version 1.7. After the release of version 1.7, the official government no longer recommends using bind(). The alternative function is on(), which is also a newly added function in version 1.7. Similarly, you can

Used to replace the live() function, which has been deleted in version 1.9;

3. The live() function is similar to the delegate() function, but the live() function improves execution speed, flexibility and CSS In terms of selector support, it is better than delegate().

4.bind() supports all versions of Jquery; live() supports jquery1.8-; delegate() supports jquery1.4.2+; on() supports jquery1.7+;

7. Summary

If the jquery version referenced in the project is a lower version, it is recommended to use delegate(). For higher versions of jquery, on() can be used instead. The above is only my personal opinion. If you have different ideas, please feel free to communicate.