There are four commonly used binding events in jQuery, namely: 1. "on()" method, which adds one or more event handlers to the selected element and sub-elements; 2. "bind()" ” method, binds a listening function of a specific event type to the selected element; 3. “live()” method, which was removed in version 1.9; 4. “delegate()” method, adds a or multiple event handlers and run the specified function.
Operating system for this tutorial: Windows 10 system, jQuery3.6.0 version, Dell G3 computer.
There are four commonly used binding events in jquery:
on () method adds one or more event handlers on the selected element and sub-elements.
Since jQuery version 1.7, the on() method is the new replacement for the bind(), live(), and delegate() methods. This method brings a lot of convenience to the API and is recommended because it simplifies the jQuery code base.
Parameters:
event: Required. Specifies one or more events or namespaces to be removed from the selected elements. Multiple event values separated by spaces. Must be a valid event
data: Optional. Specifies that event handlers can only be added to specified child elements (and not the selector itself, such as the deprecated delegate() method).
function: Optional. Specifies a function to run when an event occurs.
map: Specifies event mapping ({event:function, event:function, ...}), containing one or more events to be added to the element , and a function to run when the event occurs.
Syntax: $(selector).on(event,childSelector,data,function,map)
Example: Add a single element to the p element Click event
$("p").on("click",function(){
alert("The paragraph was clicked.");
});bind() function is to bind a specific event type to the selected element Listening function,
Parameters:
type:Required. Event type, such as click, change, mouseover, etc.;
data:Optional. The parameters passed into the listening function are obtained through event.data. Optional;
function:Required. Specifies the function (listening function) to be run when an event occurs, and the event object can be passed in. The event here is the event object encapsulated by jQuery, which is different from the native event object. You need to pay attention when using it.
map:Specifies event mapping ({event:function, event:function, ...}), containing elements to be added to One or more events, and a function to run when the event occurs
Syntax: $(selector).bind(event,data,function,map)
Example: Add a click event to
$("p").bind("click",function(){
alert("单击p元素");
});live (), was removed in version 1.9. Please use on() method instead. Adds one or more event handlers to the current or future selected elements. (Still summarized here)
Parameters:
event: required . Specifies one or more events to be added to the element. Multiple event values separated by spaces. Must be a valid event.
data:Optional. Extra parameters passed to the function
function:Required. When an event occurs, the function
is run. Syntax: $(selector).live(event,data,function)
Example: When the button is clicked, hide or show the element:
$("button").live("click",function(){
$("p").slideToggle();
});delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
参数：
childSelector：必需。规定要添加事件处理程序的一个或多个子元素。
event：必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data:可选。传递到该函数的额外参数
function:必需。当事件发生时，运行的函数
语法：$(selector).delegate(childSelector,event,data,function)
举例：当单击 元素时，改变所有 元素的背景颜色： The above is the detailed content of What are the common binding events in jquery?. For more information, please follow other related articles on the PHP Chinese website!$("div").delegate("p","click",function(){
$("p").css("background-color","pink");
});
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
