Four ways to bind jquery events

jquery provides four ways to bind events, namely bind, Live, delegate, on, corresponding to the function of the cancellation of the listener is unbind, die, undelegate, off:

one, On () method (preferred method)

The on () method adds one or more event handlers on the selected element and child elements.

Since JQuery version 1.7, the On () method is a new alternative to the Bind (), Live (), and Delegate () methods. This approach brings a lot of convenience to the API, and we recommend using this approach, which simplifies the JQuery code base.

Parameters:

event: Required. Specifies one or more events or namespaces to remove from the selected element. Multiple event values are separated by a space. Must be a valid event

data: Optional. Specifies that event handlers can be added only to the specified child elements (and not to the selector itself, such as the deprecated Delegate () method).

function: Optional. Specifies the function to run when an event occurs.

Map: Specifies the event map ({event:function, event:function, ...})that contains one or more events to add to the element, and the function to run when the event occurs.

Syntax: $ (selector). On (event,childselector,data,function,map)

Example: Adding a click event to a P element

$ ("P"). On ("click",function() {    alert ("the paragraph is clicked.") );});

second, bind () method

The bind () function is to tie a listener function of a particular event type to the selected element.

Parameters:

type: required. Event type, such as click, change, mouseover, etc.;

data: Optional. The parameters of the incoming listener function are obtained through event.data. Optional;

function: required. Specifies the function (listener function) that runs when an event occurs, which can be passed into the event object, where the event is a jquery-encapsulated event object that differs from the native event object and needs attention when used.

map: Specify Event Mappings ({event:function, event:function, ...}), containing one or more events to add to the element, and functions to run when an event occurs

Syntax: $ (selector). Bind (event,data,function,map)

Example: Add a click event to <p>

$ ("P"). Bind ("click",function() {    alert ("Clicking P Element");});

third, Live () method

Live (), removed from version 1.9. please use the On () method instead. Adds one or more event handlers to the current or future selected element. (or summarized here)

Parameters:

event: Required. Specifies one or more events that are added to an element. Multiple event values are separated by a space. Must be a valid event.

data: Optional. Extra arguments passed to the function

function: required. When an event occurs, the function that is run

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

Example: Hide or show the <p> element when the button is clicked:

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

Iv. Delegate () method

The delegate () method adds one or more event handlers for the specified element (the child element of the selected element) and specifies the function to run when these events occur. event handlers that use the delegate () method apply to current or future elements, such as new elements created by a script.

Parameters:

childselector: required. Specifies one or more child elements to add an event handler.

event: Required. Specifies one or more events that are added to an element. Multiple event values are separated by a space. Must be a valid event.

data: Optional. Extra arguments passed to the function

function: required. When an event occurs, the function that is run

Syntax: $ (selector). Delegate (childselector,event,data,function)

Example: Change the background color of all <p> elements when you click the <p> element inside the <div> element:

$ ("div"). Delegate ("P", "click",function() {    $ ("P"). CSS ("Background-color", "Pink");});

Four ways to bind jquery events