What is an event listener?

This is a recommends products dialog
Top Suggestions
Starting at
View All >
Language
French
English
ไทย
German
繁體中文
Country
Hi
All
Sign In / Create Account
language Selector,${0} is Selected
Register & Shop at Lenovo Pro
Register at Education Store
Pro Tier Benefits
• Save up to an extra 20% on Think everyday pricing.
• Spend $15K, advance for FREE to Plus Tier with increased benefits.
Plus Tier Benefits
• Save up to an extra 25% on Think everyday pricing.
• Spend $50K, advance for FREE to Elite Tier with increased benefits.
Elite Tier Benefits
• Save up to an extra 30% on Think everyday pricing.
Reseller Benefits
• Access to Lenovo's full product portfolio
• Configure and Purchase at prices better than Lenovo.com
View All Details >
more to reach
PRO Plus
PRO Elite
Congratulations, you have reached Elite Status!
Pro for Business
Delete icon Remove icon Add icon Reload icon
TEMPORARILY UNAVAILABLE
DISCONTINUED
Temporary Unavailable
Cooming Soon!
. Additional units will be charged at the non-eCoupon price. Purchase additional now
We're sorry, the maximum quantity you are able to buy at this amazing eCoupon price is
Sign in or Create an Account to Save Your Cart!
Sign in or Create an Account to Join Rewards
View Cart
Your cart is empty! Don’t miss out on the latest products and savings — find your next favorite laptop, PC, or accessory today.
Remove
item(s) in cart
Some items in your cart are no longer available. Please visit cart for more details.
has been deleted
Please review your cart as items have changed.
of
Contains Add-ons
Subtotal
Proceed to Checkout
Yes
No
Popular Searches
What are you looking for today ?
Trending
Recent Searches
Hamburger Menu
skip to main content
{"backgroundColor":"#e6f4fa","sideMsg":"","data":[{"pcInfo":{"t_id":"","language":{},"id":""},"mAndTabInfo":"","bannerInfo":{"t_id":"Page18360269-4aa1-418a-8df3-ff361657eaea","language":{"en_au":"%3Cp%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%20color%3A%20rgb(0%2C%200%2C%200)%3B%22%3EYoga%20Slim%207i%20(14%26%2339%3B%26%2339%3B%2C%20Gen%209)%20%7C%20Unlock%20seamless%20AI-powered%20creativity%20with%20Intel%C2%AE%20Core%E2%84%A2%20Ultra%20processors%20in%20a%20thin%2C%20light%20design%20with%20epic%20battery%20life.%26nbsp%3B%26nbsp%3B%26nbsp%3B%3C%2Fspan%3E%3Ca%20href%3D%22%2Fp%2Flaptops%2Fyoga%2Fyoga-slim-series%2Fyoga-slim-7i-gen-9-aura-edition-15-inch-intel%2Flen101y0051%3FipromoID%3Dhellobar_01_Yoga-Slim-7i-Gen-9%22%20target%3D%22_self%22%20textvalue%3D%22Pre-order%20Now%22%20style%3D%22color%3A%20rgb(0%2C%200%2C%200)%3B%20text-decoration%3A%20underline%3B%22%3E%3Cspan%20style%3D%22color%3A%20rgb(0%2C%200%2C%200)%3B%22%3E%3Cstrong%3EPre-order%20Now%3C%2Fstrong%3E%3Cspan%20style%3D%22color%3A%20rgb(79%2C%20129%2C%20189)%3B%22%3E%3Cstrong%3E%3C%2Fstrong%3E%3Cstrong%3E%3C%2Fstrong%3E%3C%2Fspan%3E%3Cspan%20style%3D%22color%3A%20rgb(54%2C%2096%2C%20146)%3B%22%3E%3Cstrong%3E%3C%2Fstrong%3E%3Cstrong%3E%3C%2Fstrong%3E%3C%2Fspan%3E%3C%2Fspan%3E%3C%2Fa%3E%3C%2Fp%3E","en":"%3Cp%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3ENeed%20Help%3F%26nbsp%3B%3C%2Fspan%3E%3Ca%20target%3D%22_self%22%20href%3D%22tel%3A13%20LENOVO%20%2F%2013%20536686%22%20style%3D%22text-wrap%3A%20wrap%3B%20color%3A%20rgb(41%2C%2078%2C%20149)%3B%22%3ECall%20us%20on%2013%20LENOVO%20%2F%2013%20536686%3C%2Fa%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%26nbsp%3Bor%26nbsp%3B%3C%2Fspan%3E%3Ca%20target%3D%22_self%22%20href%3D%22https%3A%2F%2Finside.chat%2FLenovoAU%22%20style%3D%22text-wrap%3A%20wrap%3B%20color%3A%20rgb(41%2C%2078%2C%20149)%3B%22%3Echat%20with%20us%3C%2Fa%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%26nbsp%3Bfor%20order%20related%20help%20and%20access%20to%20special%20deals!%3C%2Fspan%3E%3C%2Fp%3E"},"id":"Page18360269-4aa1-418a-8df3-ff361657eaea"},"gInfo":{"t_id":"","language":{},"id":""}},{"pcInfo":"","mAndTabInfo":"","bannerInfo":{"t_id":"Page8da1d371-f894-419a-834d-c8e12aa63f4d","language":{"en_au":"%3Cp%3E%3Cimg%20src%3D%22https%3A%2F%2Fp2-ofp.static.pub%2FShareResource%2Fanz%2Fimg%2FMasthead_Carousel%2Flfs-logo--reversed.svg%22%20alt%3D%22logo%22%20width%3D%2290%22%20height%3D%2218%22%20style%3D%22text-wrap%3A%20wrap%3B%22%2F%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%26nbsp%3BT%26amp%3BCs%20Apply.%20Call%2013%20LENOVO%2F%2013%20536686%20or%20chat%20with%20us%20to%20place%20an%20order.%26nbsp%3B%3C%2Fspan%3E%3Ca%20target%3D%22_self%22%20style%3D%22text-wrap%3A%20wrap%3B%20text-decoration-line%3A%20underline%3B%20color%3A%20rgb(41%2C%2078%2C%20149)%3B%22%3ECHAT%20NOW%20TO%20ORDER%3C%2Fa%3E%3C%2Fp%3E","en":"%3Cp%3E%3Cimg%20src%3D%22https%3A%2F%2Fp2-ofp.static.pub%2FShareResource%2Fanz%2Fimg%2FMasthead_Carousel%2Flfs-logo--reversed.svg%22%20alt%3D%22logo%22%20width%3D%2290%22%20height%3D%2218%22%20style%3D%22text-wrap%3A%20wrap%3B%22%2F%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%26nbsp%3B24%20months%20Interest%20Free*%20with%20Latitude.%20Call%2013%20LENOVO%2F%2013%20536686%20or%20chat%20with%20us%20to%20place%20an%20order.%26nbsp%3B%3C%2Fspan%3E%3Ca%20target%3D%22_self%22%20style%3D%22text-wrap%3A%20wrap%3B%20text-decoration-line%3A%20underline%3B%20color%3A%20rgb(41%2C%2078%2C%20149)%3B%22%3ECHAT%20NOW%20TO%20ORDER%3C%2Fa%3E%3C%2Fp%3E"},"id":"Page8da1d371-f894-419a-834d-c8e12aa63f4d"},"gInfo":""},{"pcInfo":"","mAndTabInfo":"","bannerInfo":{"t_id":"Page464dbbb6-f3de-429c-b592-a52b18d61e52","language":{"en_au":"%3Cp%3E%3Cstrong%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3ELenovo%20Education%3C%2Fspan%3E%3C%2Fstrong%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%20%7C%20Register%20to%20unlock%20savings%20%26amp%3B%20benefits%20on%20study-friendly%20PCs%20and%20accessories.%3C%2Fspan%3E%3Cbr%20style%3D%22text-wrap%3A%20wrap%3B%22%2F%3E%3Ca%20href%3D%22https%3A%2F%2Fwww.lenovo.com%2Fau%2Fedu%2Feducation%2Fen%2Flogin%2Fedu%2F%22%20target%3D%22_blank%22%20title%3D%22SIGN%20UP%20OR%20LOG%20IN%22%20style%3D%22text-wrap%3A%20wrap%3B%20color%3A%20rgb(41%2C%2078%2C%20149)%3B%22%3EJoin%20Lenovo%20Education%3C%2Fa%3E%3C%2Fp%3E","en":""},"id":"Page464dbbb6-f3de-429c-b592-a52b18d61e52"},"gInfo":""},{"pcInfo":"","mAndTabInfo":"","bannerInfo":{"t_id":"Pagebce4aa3a-251c-46ab-bb14-185620d8805a","language":{"en_au":"%3Cp%3E%3Cimg%20src%3D%22https%3A%2F%2Fp3-ofp.static.pub%2FShareResource%2Fanz%2Fimg%2FAU-amazonmusic-unlimited-horizontal-130x26-0827.png%22%20alt%3D%22Amazon%20Music%20Unlimited%22%20width%3D%22130%22%20style%3D%22text-wrap%3A%20wrap%3B%22%2F%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%26nbsp%3BGet%204%20months%20Free.%20%2412.99%2Fmonth%20after.%20New%20subscribers%20only.%20Terms%20apply.%26nbsp%3B%3C%2Fspan%3E%3Ca%20href%3D%22https%3A%2F%2Fwww.lenovo.com%2Fau%2Fen%2Fp%2Faccessories-and-software%2Fsoftware-subscription%2Famazon-subscription%2Frr00125299%3FipromoID%3Dau_pc_carousel_banner_amu%22%20target%3D%22_blank%22%20style%3D%22text-wrap%3A%20wrap%3B%20color%3A%20rgb(79%2C%20129%2C%20189)%3B%22%3ELEARN%20MORE%3C%2Fa%3E%3C%2Fp%3E","en":""},"id":"Pagebce4aa3a-251c-46ab-bb14-185620d8805a"},"gInfo":""},{"pcInfo":"","mAndTabInfo":"","bannerInfo":{"t_id":"Pageb17b1617-d40b-4c92-b9bd-6c6db61dc0db","language":{"en_au":"%3Cp%3E%3Cimg%20src%3D%22https%3A%2F%2Fp3-ofp.static.pub%2Ffes%2Fcms%2F2022%2F09%2F20%2Fsgy8gw8u4tymopd8g2224x0drocvbb133978.png%22%20alt%3D%22zip-logo%22%20style%3D%22text-wrap%3A%20wrap%3B%22%2F%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3E17%20months%20interest%20free*%20with%20ZIP.%20Call%2013%20LENOVO%2F%2013%20536686%20or%20chat%20with%20us%20to%20place%20an%20order.%26nbsp%3B%3C%2Fspan%3E%3Ca%20target%3D%22_self%22%20style%3D%22text-wrap%3A%20wrap%3B%20text-decoration-line%3A%20underline%3B%20color%3A%20rgb(41%2C%2078%2C%20149)%3B%22%3ECHAT%20NOW%20TO%20ORDER%3C%2Fa%3E%3C%2Fp%3E","en":""},"id":"Pageb17b1617-d40b-4c92-b9bd-6c6db61dc0db"},"gInfo":""}],"autoRun":true,"displayTerminal":"pc,tablet,mobile"}


What is an event listener?

An event listener allows you to detect and respond to events within your program or application. It enables you to write code that reacts to specific actions or user interactions, such as button clicks, mouse movements, or keyboard input.

How does an event listener work?

When you attach an event listener to an element or object, it waits for a particular event to occur. When the event is triggered, the listener executes a specified function or block of code. This function can perform various actions, such as updating the user interface, processing data, or triggering other events.

Why are event listeners important?

Event listeners play a crucial role in building interactive and responsive applications. By listening for events and responding accordingly, you can create dynamic user experiences and enable interactivity. Whether it's handling form submissions, tracking user clicks, or capturing keyboard inputs, event listeners are essential for making your application come alive.

Can I attach multiple event listeners to the same element?

Yes, you can attach multiple event listeners to the same element. This flexibility allows you to handle different aspects of the same event or perform multiple actions based on a single interaction. For example, with a button element, you can attach one event listener to change its color when clicked and another listener to display a message.

How do event listeners contribute to code organization?

Event listeners help in organizing your code by separating event handling logic from other parts of your program. By attaching event listeners to specific elements or objects, you can keep the code responsible for handling isolated and organized events. This modularity makes it easier to understand, update, and maintain your codebase over time.

Can an element have multiple event listeners for the same event?

Yes, an element can have multiple event listeners for the same event. When the event occurs, all the attached event listeners will be triggered and execute their respective functions or code blocks.

How do event listeners handle event propagation?

Event propagation refers to the order in which events are handled when elements are nested within each other. Event listeners can be set to either capture the event during the capturing phase or handle it during the bubbling phase. By default, event listeners are set to handle events during the bubbling phase, where the innermost element triggers the event first and then it bubbles up to the outer elements. However, you can specify the capturing phase using the addEventListener method's third argument as true.

Can event listeners be asynchronous?

Yes, event listeners can be asynchronous. You can use asynchronous functions or utilize asynchronous operations within your event listener function. This allows you to perform tasks asynchronously, such as making application programming interfaces (API) calls, fetching data, or updating the user interface without blocking the main thread.

Can event listeners be used to handle touch events on mobile devices?

Yes, event listeners can be used to handle touch events on mobile devices. In addition to the common events like 'click' or 'mouseover', there are touch-specific events like 'touchstart', 'touchmove', and 'touchend' that you can listen for. These events allow you to create touch-responsive interfaces and build mobile-friendly applications.

What is event delegation and how does it relate to event listeners?

Event delegation is a technique where you attach a single event listener to a parent element to handle events for its child elements. Instead of attaching individual event listeners to each child element, you take advantage of event bubbling to capture events at the parent level. This improves performance, reduces memory usage, and allows you to dynamically handle events for elements that may be added or removed from the document object model (DOM).

Can event listeners be used with AJAX or fetch requests?

Yes, event listeners can be used with AJAX or fetch requests. You can attach event listeners to elements like buttons or form inputs and, upon user interaction, trigger AJAX or fetch requests to send or retrieve data from a server. This allows you to create interactive web applications that communicate with servers without refreshing the entire page.

Can event listeners be attached to elements that are dynamically created or added to the document object model (DOM)?

Yes, event listeners can be attached to elements that are dynamically created or added to the DOM. You can use event delegation by attaching the event listener to a parent element that already exists in the DOM. This way, the event will be captured for any dynamically added child elements as well.

Can event listeners be used to handle media events, such as video playback or audio controls?

Yes, event listeners can be used to handle media events, allowing you to control video playback, audio controls, or track progress. For example, you can listen for events like 'play', 'pause', 'ended', 'timeupdate', 'volumechange', and more to customize the behavior and interactivity of media elements on your web page.

Can event listeners be used with cascading style sheets (CSS) animations or transitions?

Yes, event listeners can be used in conjunction with CSS animations or transitions. By listening for events like 'animationend', 'transitionend', or 'animationiteration', you can synchronize JavaScript code with CSS animations or transitions. This allows for complex and interactive animations that respond to user actions or dynamically update based on specific events.

Are event listeners limited to web development or can they be used in other software applications too?

Event listeners are not limited to web development and can be used in other software applications as well. Many programming frameworks and libraries offer event-driven architectures where you can attach event listeners and handle events in various software domains, such as desktop applications, mobile apps, or even IoT devices.

Can event listeners be used to enhance accessibility in web applications?

Absolutely, event listeners can be used to enhance accessibility in web applications. By listening for keyboard events like 'keyup' or 'keydown', you can improve keyboard navigation and make your application more accessible to users who rely on assistive technologies. Additionally, you can listen for screen reader events or custom accessibility events to provide alternative user interface (UI) interactions or assistive feedback.

Can event listeners be used to create custom gestures or interactions on touch devices?

Yes, event listeners can be used to create custom gestures or interactions on touch devices. By listening for touch events like 'touchstart', 'touchmove', and 'touchend', you can track the touch positions and velocities to create your own gesture recognition logic. This allows you to build unique touch-based interactions tailored to your application's needs.

{"pageComponentDataId":"e857fdeft7e51-4b61-84dc-bccec6e68e00","pageComponentId":"e857fdeft7e51-4b61-84dc-bccec6e68e00","isAssociatedRelease":"true","pageComponentDataLangCode":"en_au","configData":{"jumpType":"currentTab","headlineColor":"black","displayNumber":"","styleMode":"vertical","miniCardHoMode":"2","headline":"","products":[{"number":{"t_id":"21kccto1wwau5","language":{"en_nz":"21kccto1wwau5","en_au":"21kccto1wwau5","en":""},"id":"Pageb33ce4b8-4839-4ba3-b993-7296d68a91b8"}},{"number":{"t_id":"21mccto1wwau3","language":{"en_nz":"21mccto1wwau3","en_au":"21mccto1wwau3","en":""},"id":"Page1fa61927-074c-4fe0-a8df-5c94362fb75c"}},{"number":{"t_id":"21lkcto1wwau3","language":{"en_nz":"21lkcto1wwau3","en_au":"21lkcto1wwau3","en":""},"id":"Pageca014688-410e-439a-a4c6-bba2ef6d4715"}},{"number":{"t_id":"21g2cto1wwau3","language":{"en_nz":"21g2cto1wwau3","en_au":"21g2cto1wwau3","en":""},"id":"Page79cd32c8-d467-4d68-b955-d273bb24eda7"}}]},"urlPrefix":"AAAAAAAH","title":"glossary-right-blue-boxes-fragment","pageId":"65b55929-de05-417a-a92a-ccb888d329b0","urlEdit":0,"uri":"/FragmentDirectory/glossary/glossary-right-blue-boxes-fragment.frag","pageComponentUuid":"e857fdeft7e51-4b61-84dc-bccec6e68e00"}
coming coming
Starting at
List Price
Web Price
Web Price:
List Price
Web Price
List Price is Lenovo’s estimate of product value based on the industry data, including the prices at which first and third-party retailers and etailers have offered or valued the same or comparable products. Third-party reseller data may not be based on actual sales.
Web Price is Lenovo’s estimate of product value based on industry data, including the prices at which Lenovo and/or third-party retailers and e-tailers have offered or valued the same or comparable products. Third-party data may not be based on actual sales.
Learn More
See More
See Less
View {0} Model
View {0} Models
Part Number:
Features
See More
See Less
compare
Added!
Great choice!
You may compare up to 4 products per product category (laptops, desktops, etc). Please de-select one to add another.
View Your Comparisons
Add To Cart
Add To Cart
We're sorry,
Products are temporarily unavailable.
Continue shopping
Learn More
Coming Soon
Featured Product
Top Deals of the Day
Oops! No results found. Visit the categories above to find your product.
Save
open in new tab
© 2024 Lenovo. All rights reserved.
© {year} Lenovo. All rights reserved.
Compare  ()
x