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:php;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:php;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:php;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:php;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:php;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!

Yes,ReactapplicationscanbeSEO-friendlywithproperstrategies.1)Useserver-siderendering(SSR)withtoolslikeNext.jstogeneratefullHTMLforindexing.2)Implementstaticsitegeneration(SSG)forcontent-heavysitestopre-renderpagesatbuildtime.3)Ensureuniquetitlesandme

React performance bottlenecks are mainly caused by inefficient rendering, unnecessary re-rendering and calculation of component internal heavy weight. 1) Use ReactDevTools to locate slow components and apply React.memo optimization. 2) Optimize useEffect to ensure that it only runs when necessary. 3) Use useMemo and useCallback for memory processing. 4) Split the large component into small components. 5) For big data lists, use virtual scrolling technology to optimize rendering. Through these methods, the performance of React applications can be significantly improved.

Someone might look for alternatives to React because of performance issues, learning curves, or exploring different UI development methods. 1) Vue.js is praised for its ease of integration and mild learning curve, suitable for small and large applications. 2) Angular is developed by Google and is suitable for large applications, with a powerful type system and dependency injection. 3) Svelte provides excellent performance and simplicity by compiling it into efficient JavaScript at build time, but its ecosystem is still growing. When choosing alternatives, they should be determined based on project needs, team experience and project size.

KeysinReactarespecialattributesassignedtoelementsinarraysforstableidentity,crucialforthereconciliationalgorithmwhichupdatestheDOMefficiently.1)KeyshelpReacttrackchanges,additions,orremovalsinlists.2)Usingunique,stablekeyslikeIDsratherthanindicespreve

ToreducesetupoverheadinReactprojects,usetoolslikeCreateReactApp(CRA),Next.js,Gatsby,orstarterkits,andmaintainamodularstructure.1)CRAsimplifiessetupwithasinglecommand.2)Next.jsandGatsbyoffermorefeaturesbutalearningcurve.3)Starterkitsprovidecomprehensi

useState()isaReacthookusedtomanagestateinfunctionalcomponents.1)Itinitializesandupdatesstate,2)shouldbecalledatthetoplevelofcomponents,3)canleadto'stalestate'ifnotusedcorrectly,and4)performancecanbeoptimizedusinguseCallbackandproperstateupdates.

Reactispopularduetoitscomponent-basedarchitecture,VirtualDOM,richecosystem,anddeclarativenature.1)Component-basedarchitectureallowsforreusableUIpieces,improvingmodularityandmaintainability.2)TheVirtualDOMenhancesperformancebyefficientlyupdatingtheUI.

TodebugReactapplicationseffectively,usethesestrategies:1)AddresspropdrillingwithContextAPIorRedux.2)HandleasynchronousoperationswithuseStateanduseEffect,usingAbortControllertopreventraceconditions.3)OptimizeperformancewithuseMemoanduseCallbacktoavoid


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Atom editor mac version download
The most popular open source editor

Notepad++7.3.1
Easy-to-use and free code editor

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
