Home >Web Front-end >Front-end Q&A >All uses of jquery on
All uses of jquery on
- WBOYOriginal
- 2023-05-14 12:50:361082browse
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 a click event listener for all button elements:
$("button").on("click", function() {
alert("你单击了按钮！");
}); In addition, the .on() method also supports other event types, such as mousedown, mousemove, keydown, etc.
2. Listen to multiple events
.on() method also supports binding multiple events. The following example will add click, mousedown and mouseup event listener: <pre class='brush:javascript;toolbar:false;'>$("button").on("click mousedown mouseup", function() {
alert("你与按钮交互了！");
});</pre>3. Specify descendant elements
method also supports filtering descendant elements to which events are bound. The following example will add click event listening for all li elements in the ul element. Tool: <pre class='brush:javascript;toolbar:false;'>$("ul").on("click", "li", function() {
alert("你单击了列表项！");
});</pre>4. Trigger multiple events at one time
By passing multiple event types as parameters to the
on() method, you can trigger these event types at once Add an event listener, such as the following example: <pre class='brush:javascript;toolbar:false;'>$("button").on({
mouseenter: function() {
$(this).css("background-color", "lightgray");
},
mouseleave: function() {
$(this).css("background-color", "white");
},
click: function() {
$(this).css("background-color", "yellow");
}
});</pre>5. Using event bubbling
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
click event listeners to all button elements and their dynamically added child elements: <pre class='brush:javascript;toolbar:false;'>$("button").on("click", function() {
alert("你单击了按钮！");
});
// 动态添加元素
$("button").append("<button>新增按钮</button>");</pre>6. Pass in Data
Sometimes it is necessary to pass additional data to the event handler, which can be achieved through the
data parameter of the .on() method. The following example will pass additional data to all button elements: <pre class='brush:javascript;toolbar:false;'>$("button").on("click", {
name: "小明",
age: 18
}, function(event) {
alert("我的名字是 " + event.data.name + "，" + "我今年 " + event.data.age + "岁。");
});</pre>3. Summary
method provides rich functions , which can help developers create dynamic events, bind event handlers and add event listeners. This article introduces all uses of the .on() method, including:
- Listen to multiple events;
- Specify descendant elements;
- Trigger multiple events at one time;
- Use event bubbling;
- Pass in data.
- Proficient in using the
method can greatly improve the efficiency of JavaScript programming.
The above is the detailed content of All uses of jquery on. For more information, please follow other related articles on the PHP Chinese website!