All uses of jquery on-Front-end Q&A-php.cn

All uses of jquery on

WBOY

Release： 2023-05-14 12:50:36

Original

1081 people have browsed it

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);

Copy after login

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 as click, 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("你单击了按钮！");
});

Copy after login

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: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>$("button").on("click mousedown mouseup", function() { alert("你与按钮交互了！"); });</pre><div class="contentsignin">Copy after login</div></div>3. Specify descendant elements

.on The ()

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: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>$("ul").on("click", "li", function() { alert("你单击了列表项！"); });</pre><div class="contentsignin">Copy after login</div></div>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: <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div>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: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>$("button").on("click", function() { alert("你单击了按钮！"); }); // 动态添加元素 $("button").append("<button>新增按钮</button>");</pre><div class="contentsignin">Copy after login</div></div>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: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>$("button").on("click", { name: "小明", age: 18 }, function(event) { alert("我的名字是 " + event.data.name + "，" + "我今年 " + event.data.age + "岁。"); });</pre><div class="contentsignin">Copy after login</div></div>3. Summary<h2></h2>.on()<p> 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 <code>.on() method, including:

Listen to a single event;