All uses of jquery on

jQuery is a popular JavaScript library that provides various features to make JavaScript programming easier and faster. Among them, the.on()method in jQuery is a very practical method that can help developers create dynamic events, bind event handlers and add event listeners. This article will introduce all uses of the.on()method.

1. Basic syntax

.on()method is used to add event handlers and event listeners. Its basic syntax is as follows:

$(selector).on(event,childSelector,data,function);

Among them,

• selector: used to select the element to be bound to the event, which can be a CSS selector or jQuery object;
• event: Specify the event type to be bound, such asclick,mousedown,mousemove, etc.;
• childSelector: Optional parameters, used to filter descendant elements to be bound to events;
• data: Optional parameters, parameters passed into the event handler;
• function: Specify the event handler to be bound, which can be a built-in function, a user-defined function or an anonymous function.

2. Usage of.on()method

.on()method has many uses, the following will be one by one introduce.

1. Listening to a single event

The following example will add aclickevent listener for allbuttonelements:

$("button").on("click", function() { alert("你单击了按钮！"); });

In addition, the.on()method also supports other event types, such asmousedown,mousemove,keydown, etc.

2. Listen to multiple events

.on()method also supports binding multiple events. The following example will addclick,mousedownandmouseupevent listener:

$("button").on("click mousedown mouseup", function() { alert("你与按钮交互了！"); });

method also supports filtering descendant elements to which events are bound. The following example will addclickevent listening for alllielements in theulelement. Tool:

$("ul").on("click", "li", function() { alert("你单击了列表项！"); });

By passing multiple event types as parameters to the

method, you can trigger these event types at once Add an event listener, such as the following example:

$("button").on({ mouseenter: function() { $(this).css("background-color", "lightgray"); }, mouseleave: function() { $(this).css("background-color", "white"); }, click: function() { $(this).css("background-color", "yellow"); } });

By using event bubbling, you can bind events to dynamic elements, that is, bind the event handler to the parent Element, when an event is triggered on a child element, the event will bubble up from the child element to the parent element and trigger the event handler.

The following example will add

event listeners to allbuttonelements and their dynamically added child elements:

$("button").on("click", function() { alert("你单击了按钮！"); }); // 动态添加元素 $("button").append("新增按钮");

Sometimes it is necessary to pass additional data to the event handler, which can be achieved through the

parameter of the.on()method. The following example will pass additional data to allbuttonelements:

$("button").on("click", { name: "小明", age: 18 }, function(event) { alert("我的名字是 " + event.data.name + "，" + "我今年 " + event.data.age + "岁。"); });