What does jquery binding event mean?

In jquery, binding events means binding ordinary time events to DOM nodes. When the DOM node is selected, bind the event to it to facilitate users to provide corresponding operations; jquery There are four methods of bind, live, delegate and on to bind events. The live method has been removed. It is recommended to use on to bind events.

The operating environment of this tutorial: windows10 system, jquery3.6.0 version, Dell G3 computer.

jquery What is the meaning of binding events?

Event binding: Bind ordinary events to DOM nodes. When the DOM node is selected, the event will be Bind it to facilitate users to provide corresponding operations.

For example: bind the click mouse event on the button button, bind the focusin focus event on the input, etc. Specific examples: often write $('.bn1').click(function in the code (){...}) is ordinary event binding.

Extension:

Event delegation: refers to supplementing and extending event binding on the basis of event binding, specifically: binding events through child node elements To pass it to the parent element DOM node (ancestor node) to uniformly manage all its descendant child elements.

In this way, when you encounter sub-elements that need to be bound to many events, you can avoid a lot of trouble and repeat the work of binding events, and provide access efficiency. Specific code $('.div').on('click','.bn2',function(){...})

jquery has four ways to bind events. bind,live,delegate,on. Among them, live has been removed, and the bottom layers of bind and delegate are implemented on.

jquery recommends that we use on to bind events. In addition to native events, jquery supports binding custom events.

The most commonly used methods

$("selector").Event name (anonymous function)

Example 1:

//这里的button为元素选择器，click为鼠标点击事件$("button").click(function(){
					//函数内容
				})

Example 2:

//这里的#btn1为id选择器即id名为btn1的元素，mouseenter为鼠标聚焦事件$("#btn1").mouseenter(function(){
					//函数内容
				})

Example 3:

//这里的.ps为类选择器即class名为ps的所有元素，mouseleave为鼠标离焦事件$(".ps").mouseleave(function(){
					//函数内容
				})

bind function

$(" Selector").bind({"Event name": anonymous function})

Example 1:

//button为元素选择器，bind的中文意思为‘绑定’$("button").bind({"click":function(){
					//函数内容
				}})

Example 2:

//这里的#btn1为id选择器即id名为btn1的元素，mouseenter为鼠标聚焦事件$("#btn1").bind({"mouseenter":function(){
					//函数内容
				}})

Example 3:

//这里的.ps为类选择器即class名为ps的所有元素，mouseleave为鼠标离焦事件$(".ps").bind({"mouseleave":function(){
					//函数内容
				}})

Note: The bind function parameter here is a dictionary wrapped in braces, the key value is the event name under double quotes, and the value value is the function Content, must be surepay attention to the format.

on function

Two formal parameters

$("selector"). on("event name", anonymous function)

Example:

$("button").on("click",function(){
					//函数内容
				})

Note: on function with two formal parameters, and bind The methods of using the functions are similar, but the formats are different and can be memorized together.

Three formal parameters

Contains three parameters, which is very suitable for parent nodes with multiple children, and can uniformly control child node events

$("Parent node selector").on("Event name", "Child node, that is, the element to be bound", anonymous function)

Example:

$("ul").on("click","li",function(){
					$(this).css("color","blue");    //this表明当前点中的对象，此语句表明，当点击li标签时候，将该li标签颜色变为blue
 				})

Note: Be sure to pay attention to usage scenarios containing three parameters, and pay attention to the use of this keyword

delegate function

The delegate function has three formal parameters, which are similar to the on function. The difference is that the parameter positions are different.

$("Parent node selector").delegate("Child node, that is, the element to be bound", "Event name", anonymous function)

$("ul").delegate("li","click",function(){
					$(this).css("color","blue");
				})

Note: Be sure to note that the order of parameters here is different from that of the on function.

Summary

• Looking at the above binding events, you can find that different binding events just change a keyword and the corresponding parameter list;
• What they all have in common is $("selector"). Function name (parameter list); the content of the parameter list is nothing more than event name, anonymous function, or child node selector ,
• The anonymous function here is actually an address that stores the code body, which is equivalent to the parameter being an address. Just to reduce the amount of code, the function address is directly replaced by an anonymous function.

##Most commonly used$("selector").Event name (anonymous function)bind function$("selector").bind({" event name": anonymous function})on function$("selector").on("event name", anonymous function)$("Parent node selector").on("Event name", "Child node, that is, the element to be bound", anonymous function)delegate function$("parent node selector").delegate("child node, that is, the element to be bound", "event name", anonymous function )

Template

Video tutorial recommendation:

jQuery video tutorial

The above is the detailed content of What does jquery binding event mean?. For more information, please follow other related articles on the PHP Chinese website!