When the page is loaded, the program can complete the corresponding operation by binding events to the elements.
In jQuery, event binding can usually be divided into three situations: element binding event, removing binding and binding one-time event processing, which are introduced separately below.
1. Bind events for elements
In jQuery, you can use the bind() method to bind events to elements. The syntax of this method is as follows:
bind(type,[data],fn)
type: Event type.
data: optional parameter, an extra data object passed to the event object as the event.data property value. This parameter is not used in most cases.
fn: The bound event handler.
For example, to bind a click event for a normal button to pop up a prompt dialog when the button is clicked, you can use the following code:
$("input:button").bind("click",function(){alert('You clicked the button');});
Two remove the binding
In jQuery, the unbind() method can be used to remove the binding event for an element. The syntax of this method is as follows:
unbind([type],[fn])
type: Optional parameter to specify the event type.
fn: An optional parameter that specifies the event handler to unbind from each matched element's event.
In the unbind() method, both parameters are optional. If the parameter is not filled, all events bound on the matched element will be deleted.
For example, to remove the click event bound for a normal button, you can use the following code:
$("input:button").unbind("click");
Three binding one-time event handling
In jQuery, you can use the one() method to bind a one-time event handler for an element. The syntax of this method is as follows:
one(type,[data],fn)
type: Used to specify the event type.
data: optional parameter, an extra data object passed to the event object as the event.data property value.
fn: The handler function on the event bound to each matched element.
For example, to display the content of the div element only when the user first clicks on the matching div element, the following code can be used:
$("div").one("click", function()
{
alert( $(this).text() ); //Display the content of the div element in the pop-up prompt dialog
});