what-is","metadata":{}}]}}]},"metadata":{"auth":{},"testAttributes":{}},"context":{"page":{"locale":"en-US","site":"Global","pageUrl":"https://aws.amazon.com/what-is/event-listener/","targetName":"Live","pageSlotId":"04e5e298-d658-4b87-98cd-ec95d1214069","organizationId":"aws-marketing","availableLocales":["\"ar-SA\"","\"de-DE\"","\"en-US\"","\"es-ES\"","\"fr-FR\"","\"id-ID\"","\"it-IT\"","\"ja-JP\"","\"ko-KR\"","\"pt-BR\"","\"ru-RU\"","\"th-TH\"","\"tr-TR\"","\"vi-VN\"","\"zh-CN\"","\"zh-TW\""]},"environment":{"stage":"prod","region":"us-east-1"},"sdkVersion":"1.0.129"},"refMap":{"manifest.js":"289765ed09","what-is-header.js":"2e0d22c000","what-is-header.rtl.css":"ccf4035484","what-is-header.css":"ce47058367","what-is-header.css.js":"004a4704e8","what-is-header.rtl.css.js":"f687973e4f"},"settings":{"templateMappings":{"category":"category","headline":"headline","primaryCTA":"primaryCTA","primaryCTAText":"primaryCTAText","primaryBreadcrumbText":"primaryBreadcrumbText","primaryBreadcrumbURL":"primaryBreadcrumbURL"}}}
event-listener","metadata":{}}]}},{"fields":{"faqQuestion":"What is the syntax of the event listener function? ","faqAnswer":"
The event listener function shares similar characteristics to other JavaScript functions. When activated, it takes the necessary action to process the event. For example, the event listener function can change displayed text, collect information from registration forms, or store data in databases. \n
Event listener syntax \nAn event listener function follows proper JavaScript syntax, like in this next example. \n
function RespondMouseClick() { \n document.getElementById(\"textdisplay1\").innerHTML += \"MouseClick happened\" ; \n } \nThis example shows the RespondMouseClick event listener function. It’s common to write the function name to reflect the purpose of the event listener. In the function, you write codes to perform specific actions when the event occurs. In this example, the function appends the text MouseClick happened to the HTML element textdisplay1. \nEvent handler syntax \nAlternatively, you might use an event handler function to respond to the activated event, like in the following example. \n
function eventHandler(event) { \n if (event.type === \"fullscreenchange\") { \nconsole.log (“full screen toggle”); \n } else { \n console.log (“full screen error”); \n } \n} \nThis allows you to manage several types of events from a specific element with one function. \n
For example, you could register an event listener to handle all types of blockchain events on event-based applications. For more information, read about building an event-based application with Amazon Managed Blockchain.","id":"seo-faq-pairs#what-is-the-syntax-of-the-event-listener-function","customSort":"2"},"metadata":{"tags":[{"id":"seo-faq-pairs#faq-collections#event-listener","name":"event-listener","namespaceId":"seo-faq-pairs#faq-collections","description":"
event-listener","metadata":{}}]}},{"fields":{"faqQuestion":"How do you add an event listener?","faqAnswer":"
An event listener will only be activated after you add it to the respective JavaScript element. To do that, you can use syntax like this: \n
\n - element.addEventListener(event, listener); \n
- element.addEventListener(event, listener, useCapture); \n
- element.addEventListener(event, listener, options); \n \n
For example, developers can call the following function to bind the click event listener on to a button element. \n
btn.addEventListener(\"click\", RespondMouseClick); \nYou can also add multiple event listeners to a specific event object without overwriting existing event handlers. \n
For example, Amazon Web Services (AWS) allows developers to chain multiple callbacks on the AWS.Request object. For more information, read how to use a request object event listener on AWS. \nParameters for adding events \nHere’s an explanation of the parameters in the previous syntax: \n
\n - The event parameter is any valid JavaScript event, such as a click, change, mouseover, key down, and load. \n
- The listener parameter is the event callback or JavaScript function created to respond to specific events. \n
- The useCapture parameter is an optional parameter that indicates the event propagation mode. It accepts Boolean values, where true activates capturing while false activates bubbling. This parameter's default value is set to false. \n
- The options parameter consists of several optional values, including capture mode and reject signals, that represent the listener’s behaviors. \n","id":"seo-faq-pairs#how-do-you-add-an-event-listener","customSort":"3"},"metadata":{"tags":[{"id":"seo-faq-pairs#faq-collections#event-listener","name":"event-listener","namespaceId":"seo-faq-pairs#faq-collections","description":"
event-listener","metadata":{}}]}},{"fields":{"faqQuestion":"How do you remove an event listener?","faqAnswer":"
Event listeners remain active until you remove them from the associated JavaScript elements. You can use the following syntax to do so. \n
element.removeEventListener(type, listener, useCapture); \nEvent listener removal parameters are similar to ones you use to add event listeners. When you remove an event listener, you must specify the same type, listener, and useCapture parameters. If you don’t, the event listener will remain active and keep triggering for future events. \nFor example, you can add an event with the following code. \n
button.addEventListener(\"click\", RespondMouseClick, true); \nBut applying the following code fails to remove the event listener. That’s because the useCapture value differs from the one registered with the button object. \nbutton.removeEventListener(\"click\", RespondMouseClick, false); \nTo successfully remove the event and prevent it from being triggered, you can use the following code. \n
button.removeEventListener(\"click\", RespondMouseClick, true);","id":"seo-faq-pairs#how-do-you-remove-an-event-listener","customSort":"4"},"metadata":{"tags":[{"id":"seo-faq-pairs#faq-collections#event-listener","name":"event-listener","namespaceId":"seo-faq-pairs#faq-collections","description":"event-listener","metadata":{}}]}},{"fields":{"faqQuestion":"How do nested event listener functions work?","faqAnswer":"
Nested event listeners are event handlers added to HTML elements at different hierarchical layers. \n
In the following HTML example, the document owns the underlying parent element, while the parent owns the child. \n
<div class=\"document\"> \n<div class=\"parent\"> \n<div class=\"child\"></div> \n</div> \n</div> \nComplex web applications might have multiple parent-child layers with respective event listener functions. When a particular event occurs, it triggers event listeners at different layers in a particular order. For example, clicking a child button will propagate the event to all handlers that capture a mouse click. \n
Events can propagate in two modes—bubbling and capturing. \n
Event bubbling \nBubbling is the default mode of JavaScript event handling. It propagates the event from the innermost layer to the outermost layer. \n
For example, a user could hover over a textbox in the child section. Then, the application could pass the event in the following order: \n
\n - The event listener in the child handles the mouse hover event. \n
- Then, the parent event listener processes the event and passes control to the document’s event listener. \n \n
To set up event bubbling, use the following syntax: \n
\n - element.addEventListener(event, listener, [false]); \n
- element.addEventListener(event, listener); \n \n
Event capturing \nEvent capturing is a special event handling mode in JavaScript where the event propagates inward from the outermost layer. Once the event reaches the target element at the inner layer, the event handling mode changes to bubbling. Then, bubbling propagates the event outward to the topmost layer. \n
For example, a user could click on a child button and start the following sequence: \n
\n - The document event listener processes the mouse click event, followed by the parent event handler. \n
- The event reaches the target element, which is the button. The button’s event listener processes the event. \n
- Event handling switches from capturing to bubbling mode. \n
- The same mouse click event fires the event handler at the parent before ending at the document. \n \n
How to choose between bubbling and capturing \nBubbling and capturing allow you to handle events differently. Bubbling is rarely used as capturing is sufficient to handle most events in applications. \n
When you decide between bubbling and capturing, you should consider the event propagation flow and how it aligns with your application’s programming logic. \n
For example, consider a parent form that consists of two child elements. The first element requires an immediate update when an event occurs at the second element. In this case, you should use the capturing mode. It ensures that the parent event listener processes the event and updates the first element. Then, it passes control to the event listener at the second child element. ","id":"seo-faq-pairs#how-do-nested-event-listener-functions-work","customSort":"5"},"metadata":{"tags":[{"id":"seo-faq-pairs#faq-collections#event-listener","name":"event-listener","namespaceId":"seo-faq-pairs#faq-collections","description":"
event-listener","metadata":{}}]}},{"fields":{"faqQuestion":"How do you stop event propagation in nested event listener functions?","faqAnswer":"
Events propagate until they reach the end destination in a nested listener arrangement. You have to use specific methods to stop the event from propagating further. \n
The following method halts the event at the event listener. \n
event.stopPropagation(); \nFor example, if you call StopPropagation at the child button, the mouse click event will not propagate to the parent and document levels. Hence, event listeners at the higher level will not be triggered. \nStop all event propagation \nStopPropagation only stops the current type of event from propagating. If the object has different types of event listeners registered to it, they still trigger despite the StopPropagation call. \nTo stop all events related to a specific object, you can use the StopImmediatePropagation method, as follows. \n event.stopImmediatePropagation(); \nWhen one event listener calls StopImmediatePropagation, no other event listeners associated with the object are triggered.","id":"seo-faq-pairs#how-do-you-stop-event-propagation-in-nested-event-listener-functions","customSort":"6"},"metadata":{"tags":[{"id":"seo-faq-pairs#faq-collections#event-listener","name":"event-listener","namespaceId":"seo-faq-pairs#faq-collections","description":"event-listener","metadata":{}}]}},{"fields":{"faqQuestion":"How can AWS support your JavaScript requirements? ","faqAnswer":"
Amazon Web Services (AWS) offers AWS SDK for JavaScript so you can easily use services in your applications with libraries and APIs. \nYou can use the SDK to develop server-side, web, and mobile web applications. The SDK supports JavaScript runtime, Node.JS, and React Native, as well as cross-runtime. This allows developers to run the same client service package on different platforms. \n
Here are other benefits of using the SDK: \n
\n - The SDK is written in TypeScript. This provides benefits such as static type-checking and class and module support. \n
- The SDK offers a middleware stack that allows you to introduce custom actions. \n
- The SDK has a modular architecture. This allows you to use only necessary packages to optimize application performance. \n \n
Get started with JavaScript applications by signing up for an AWS account today.","id":"seo-faq-pairs#how-can-aws-support-your-javascript-requirements","customSort":"7"},"metadata":{"tags":[{"id":"seo-faq-pairs#faq-collections#event-listener","name":"event-listener","namespaceId":"seo-faq-pairs#faq-collections","description":"event-listener","metadata":{}}]}}]},"metadata":{"auth":{},"pagination":{"empty":false,"present":true},"testAttributes":{}},"context":{"page":{"locale":"en-US","site":"Global","pageUrl":"https://aws.amazon.com/what-is/event-listener/","targetName":"Live","pageSlotId":"04e5e298-d658-4b87-98cd-ec95d1214069","organizationId":"aws-marketing","availableLocales":["\"ar-SA\"","\"de-DE\"","\"en-US\"","\"es-ES\"","\"fr-FR\"","\"id-ID\"","\"it-IT\"","\"ja-JP\"","\"ko-KR\"","\"pt-BR\"","\"ru-RU\"","\"th-TH\"","\"tr-TR\"","\"vi-VN\"","\"zh-CN\"","\"zh-TW\""]},"environment":{"stage":"prod","region":"us-east-1"},"sdkVersion":"1.0.129"},"refMap":{"manifest.js":"3dea65b485","rt-faq.js":"003db38f04","rt-faq.css":"b00bda11a1","rt-faq.css.js":"0af1d62724","rt-faq.rtl.css":"f26a77ea1d","rt-faq.rtl.css.js":"efb444c1ed"},"settings":{"templateMappings":{"question":"faqQuestion","answer":"faqAnswer"}}}
What is an Event Listener?
An event listener is a function in JavaScript that waits for an event to occur then responds to it. JavaScript is a programming language that developers use to make interactive webpages. JavaScript’s event listener function allows you to create custom responses to events like mouse clicks, keyboard clicks, and window resizing. The programming paradigm of waiting and responding to real-time events is called event handling.
What is the syntax of the event listener function?
The event listener function shares similar characteristics to other JavaScript functions. When activated, it takes the necessary action to process the event. For example, the event listener function can change displayed text, collect information from registration forms, or store data in databases.
Event listener syntax
An event listener function follows proper JavaScript syntax, like in this next example.
function RespondMouseClick() {
document.getElementById("textdisplay1").innerHTML += "MouseClick happened" ;
}
This example shows the RespondMouseClick event listener function. It’s common to write the function name to reflect the purpose of the event listener. In the function, you write codes to perform specific actions when the event occurs. In this example, the function appends the text MouseClick happened to the HTML element textdisplay1.
Event handler syntax
Alternatively, you might use an event handler function to respond to the activated event, like in the following example.
function eventHandler(event) {
if (event.type === "fullscreenchange") {
console.log (“full screen toggle”);
} else {
console.log (“full screen error”);
}
}
This allows you to manage several types of events from a specific element with one function.
For example, you could register an event listener to handle all types of blockchain events on event-based applications. For more information, read about building an event-based application with Amazon Managed Blockchain.
How do you add an event listener?
An event listener will only be activated after you add it to the respective JavaScript element. To do that, you can use syntax like this:
- element.addEventListener(event, listener);
- element.addEventListener(event, listener, useCapture);
- element.addEventListener(event, listener, options);
For example, developers can call the following function to bind the click event listener on to a button element.
btn.addEventListener("click", RespondMouseClick);
You can also add multiple event listeners to a specific event object without overwriting existing event handlers.
For example, Amazon Web Services (AWS) allows developers to chain multiple callbacks on the AWS.Request object. For more information, read how to use a request object event listener on AWS.
Parameters for adding events
Here’s an explanation of the parameters in the previous syntax:
- The event parameter is any valid JavaScript event, such as a click, change, mouseover, key down, and load.
- The listener parameter is the event callback or JavaScript function created to respond to specific events.
- The useCapture parameter is an optional parameter that indicates the event propagation mode. It accepts Boolean values, where true activates capturing while false activates bubbling. This parameter's default value is set to false.
- The options parameter consists of several optional values, including capture mode and reject signals, that represent the listener’s behaviors.
How do you remove an event listener?
Event listeners remain active until you remove them from the associated JavaScript elements. You can use the following syntax to do so.
element.removeEventListener(type, listener, useCapture);
Event listener removal parameters are similar to ones you use to add event listeners. When you remove an event listener, you must specify the same type, listener, and useCapture parameters. If you don’t, the event listener will remain active and keep triggering for future events.
For example, you can add an event with the following code.
button.addEventListener("click", RespondMouseClick, true);
But applying the following code fails to remove the event listener. That’s because the useCapture value differs from the one registered with the button object.
button.removeEventListener("click", RespondMouseClick, false);
To successfully remove the event and prevent it from being triggered, you can use the following code.
button.removeEventListener("click", RespondMouseClick, true);
How do nested event listener functions work?
Nested event listeners are event handlers added to HTML elements at different hierarchical layers.
In the following HTML example, the document owns the underlying parent element, while the parent owns the child.
<div class="document">
<div class="parent">
<div class="child"></div>
</div>
</div>
Complex web applications might have multiple parent-child layers with respective event listener functions. When a particular event occurs, it triggers event listeners at different layers in a particular order. For example, clicking a child button will propagate the event to all handlers that capture a mouse click.
Events can propagate in two modes—bubbling and capturing.
Event bubbling
Bubbling is the default mode of JavaScript event handling. It propagates the event from the innermost layer to the outermost layer.
For example, a user could hover over a textbox in the child section. Then, the application could pass the event in the following order:
- The event listener in the child handles the mouse hover event.
- Then, the parent event listener processes the event and passes control to the document’s event listener.
To set up event bubbling, use the following syntax:
- element.addEventListener(event, listener, [false]);
- element.addEventListener(event, listener);
Event capturing
Event capturing is a special event handling mode in JavaScript where the event propagates inward from the outermost layer. Once the event reaches the target element at the inner layer, the event handling mode changes to bubbling. Then, bubbling propagates the event outward to the topmost layer.
For example, a user could click on a child button and start the following sequence:
- The document event listener processes the mouse click event, followed by the parent event handler.
- The event reaches the target element, which is the button. The button’s event listener processes the event.
- Event handling switches from capturing to bubbling mode.
- The same mouse click event fires the event handler at the parent before ending at the document.
How to choose between bubbling and capturing
Bubbling and capturing allow you to handle events differently. Bubbling is rarely used as capturing is sufficient to handle most events in applications.
When you decide between bubbling and capturing, you should consider the event propagation flow and how it aligns with your application’s programming logic.
For example, consider a parent form that consists of two child elements. The first element requires an immediate update when an event occurs at the second element. In this case, you should use the capturing mode. It ensures that the parent event listener processes the event and updates the first element. Then, it passes control to the event listener at the second child element.
How do you stop event propagation in nested event listener functions?
Events propagate until they reach the end destination in a nested listener arrangement. You have to use specific methods to stop the event from propagating further.
The following method halts the event at the event listener.
event.stopPropagation();
For example, if you call StopPropagation at the child button, the mouse click event will not propagate to the parent and document levels. Hence, event listeners at the higher level will not be triggered.
Stop all event propagation
StopPropagation only stops the current type of event from propagating. If the object has different types of event listeners registered to it, they still trigger despite the StopPropagation call.
To stop all events related to a specific object, you can use the StopImmediatePropagation method, as follows.
event.stopImmediatePropagation();
When one event listener calls StopImmediatePropagation, no other event listeners associated with the object are triggered.
How can AWS support your JavaScript requirements?
Amazon Web Services (AWS) offers AWS SDK for JavaScript so you can easily use services in your applications with libraries and APIs.
You can use the SDK to develop server-side, web, and mobile web applications. The SDK supports JavaScript runtime, Node.JS, and React Native, as well as cross-runtime. This allows developers to run the same client service package on different platforms.
Here are other benefits of using the SDK:
- The SDK is written in TypeScript. This provides benefits such as static type-checking and class and module support.
- The SDK offers a middleware stack that allows you to introduce custom actions.
- The SDK has a modular architecture. This allows you to use only necessary packages to optimize application performance.
Get started with JavaScript applications by signing up for an AWS account today.
document.getElementById(\"textdisplay1\").innerHTML += \"MouseClick happened\" ; \n } \n This example shows the RespondMouseClick event listener function. It’s common to write the function name to reflect the purpose of the event listener. In the function, you write codes to perform specific actions when the event occurs. In this example, the function appends the text MouseClick happened to the HTML element textdisplay1. \n Alternatively, you might use an event handler function to respond to the activated event, like in the following example. \n function eventHandler(event) { \n if (event.type === \"fullscreenchange\") { \n console.log (“full screen toggle”); \n } else { \n console.log (“full screen error”); \n } \n } \n This allows you to manage several types of events from a specific element with one function. \n For example, you could register an event listener to handle all types of blockchain events on event-based applications. For more information, read about building an event-based application with Amazon Managed Blockchain.","id":"seo-faq-pairs#what-is-the-syntax-of-the-event-listener-function","customSort":"2"},"metadata":{"tags":[{"id":"seo-faq-pairs#faq-collections#event-listener","name":"event-listener","namespaceId":"seo-faq-pairs#faq-collections","description":"
event-listener","metadata":{}}]}},{"fields":{"faqQuestion":"How do you add an event listener?","faqAnswer":" An event listener will only be activated after you add it to the respective JavaScript element. To do that, you can use syntax like this: \n For example, developers can call the following function to bind the click event listener on to a button element. \n btn.addEventListener(\"click\", RespondMouseClick); \n You can also add multiple event listeners to a specific event object without overwriting existing event handlers. \n For example, Amazon Web Services (AWS) allows developers to chain multiple callbacks on the AWS.Request object. For more information, read how to use a request object event listener on AWS. \n Here’s an explanation of the parameters in the previous syntax: \n event-listener","metadata":{}}]}},{"fields":{"faqQuestion":"How do you remove an event listener?","faqAnswer":" Event listeners remain active until you remove them from the associated JavaScript elements. You can use the following syntax to do so. \n element.removeEventListener(type, listener, useCapture); \n Event listener removal parameters are similar to ones you use to add event listeners. When you remove an event listener, you must specify the same type, listener, and useCapture parameters. If you don’t, the event listener will remain active and keep triggering for future events. \n For example, you can add an event with the following code. \n button.addEventListener(\"click\", RespondMouseClick, true); \n But applying the following code fails to remove the event listener. That’s because the useCapture value differs from the one registered with the button object. \n button.removeEventListener(\"click\", RespondMouseClick, false); \n To successfully remove the event and prevent it from being triggered, you can use the following code. \n button.removeEventListener(\"click\", RespondMouseClick, true);","id":"seo-faq-pairs#how-do-you-remove-an-event-listener","customSort":"4"},"metadata":{"tags":[{"id":"seo-faq-pairs#faq-collections#event-listener","name":"event-listener","namespaceId":"seo-faq-pairs#faq-collections","description":" event-listener","metadata":{}}]}},{"fields":{"faqQuestion":"How do nested event listener functions work?","faqAnswer":" Nested event listeners are event handlers added to HTML elements at different hierarchical layers. \n In the following HTML example, the document owns the underlying parent element, while the parent owns the child. \n <div class=\"document\"> \n <div class=\"parent\"> \n <div class=\"child\"></div> \n </div> \n </div> \n Complex web applications might have multiple parent-child layers with respective event listener functions. When a particular event occurs, it triggers event listeners at different layers in a particular order. For example, clicking a child button will propagate the event to all handlers that capture a mouse click. \n Events can propagate in two modes—bubbling and capturing. \n Bubbling is the default mode of JavaScript event handling. It propagates the event from the innermost layer to the outermost layer. \n For example, a user could hover over a textbox in the child section. Then, the application could pass the event in the following order: \n To set up event bubbling, use the following syntax: \n Event capturing is a special event handling mode in JavaScript where the event propagates inward from the outermost layer. Once the event reaches the target element at the inner layer, the event handling mode changes to bubbling. Then, bubbling propagates the event outward to the topmost layer. \n For example, a user could click on a child button and start the following sequence: \n Bubbling and capturing allow you to handle events differently. Bubbling is rarely used as capturing is sufficient to handle most events in applications. \n When you decide between bubbling and capturing, you should consider the event propagation flow and how it aligns with your application’s programming logic. \n For example, consider a parent form that consists of two child elements. The first element requires an immediate update when an event occurs at the second element. In this case, you should use the capturing mode. It ensures that the parent event listener processes the event and updates the first element. Then, it passes control to the event listener at the second child element. ","id":"seo-faq-pairs#how-do-nested-event-listener-functions-work","customSort":"5"},"metadata":{"tags":[{"id":"seo-faq-pairs#faq-collections#event-listener","name":"event-listener","namespaceId":"seo-faq-pairs#faq-collections","description":" event-listener","metadata":{}}]}},{"fields":{"faqQuestion":"How do you stop event propagation in nested event listener functions?","faqAnswer":" Events propagate until they reach the end destination in a nested listener arrangement. You have to use specific methods to stop the event from propagating further. \n The following method halts the event at the event listener. \n event.stopPropagation(); \n For example, if you call StopPropagation at the child button, the mouse click event will not propagate to the parent and document levels. Hence, event listeners at the higher level will not be triggered. \n StopPropagation only stops the current type of event from propagating. If the object has different types of event listeners registered to it, they still trigger despite the StopPropagation call. \n To stop all events related to a specific object, you can use the StopImmediatePropagation method, as follows. \n event.stopImmediatePropagation(); \n When one event listener calls StopImmediatePropagation, no other event listeners associated with the object are triggered.","id":"seo-faq-pairs#how-do-you-stop-event-propagation-in-nested-event-listener-functions","customSort":"6"},"metadata":{"tags":[{"id":"seo-faq-pairs#faq-collections#event-listener","name":"event-listener","namespaceId":"seo-faq-pairs#faq-collections","description":" event-listener","metadata":{}}]}},{"fields":{"faqQuestion":"How can AWS support your JavaScript requirements? ","faqAnswer":" Amazon Web Services (AWS) offers AWS SDK for JavaScript so you can easily use services in your applications with libraries and APIs. \n You can use the SDK to develop server-side, web, and mobile web applications. The SDK supports JavaScript runtime, Node.JS, and React Native, as well as cross-runtime. This allows developers to run the same client service package on different platforms. \n Here are other benefits of using the SDK: \n Get started with JavaScript applications by signing up for an AWS account today.","id":"seo-faq-pairs#how-can-aws-support-your-javascript-requirements","customSort":"7"},"metadata":{"tags":[{"id":"seo-faq-pairs#faq-collections#event-listener","name":"event-listener","namespaceId":"seo-faq-pairs#faq-collections","description":" event-listener","metadata":{}}]}}]},"metadata":{"auth":{},"pagination":{"empty":false,"present":true},"testAttributes":{}},"context":{"page":{"locale":"en-US","site":"Global","pageUrl":"https://aws.amazon.com/what-is/event-listener/","targetName":"Live","pageSlotId":"04e5e298-d658-4b87-98cd-ec95d1214069","organizationId":"aws-marketing","availableLocales":["\"ar-SA\"","\"de-DE\"","\"en-US\"","\"es-ES\"","\"fr-FR\"","\"id-ID\"","\"it-IT\"","\"ja-JP\"","\"ko-KR\"","\"pt-BR\"","\"ru-RU\"","\"th-TH\"","\"tr-TR\"","\"vi-VN\"","\"zh-CN\"","\"zh-TW\""]},"environment":{"stage":"prod","region":"us-east-1"},"sdkVersion":"1.0.129"},"refMap":{"manifest.js":"3dea65b485","rt-faq.js":"003db38f04","rt-faq.css":"b00bda11a1","rt-faq.css.js":"0af1d62724","rt-faq.rtl.css":"f26a77ea1d","rt-faq.rtl.css.js":"efb444c1ed"},"settings":{"templateMappings":{"question":"faqQuestion","answer":"faqAnswer"}}}
An event listener is a function in JavaScript that waits for an event to occur then responds to it. JavaScript is a programming language that developers use to make interactive webpages. JavaScript’s event listener function allows you to create custom responses to events like mouse clicks, keyboard clicks, and window resizing. The programming paradigm of waiting and responding to real-time events is called event handling. The event listener function shares similar characteristics to other JavaScript functions. When activated, it takes the necessary action to process the event. For example, the event listener function can change displayed text, collect information from registration forms, or store data in databases. An event listener function follows proper JavaScript syntax, like in this next example. function RespondMouseClick() { document.getElementById("textdisplay1").innerHTML += "MouseClick happened" ; } This example shows the RespondMouseClick event listener function. It’s common to write the function name to reflect the purpose of the event listener. In the function, you write codes to perform specific actions when the event occurs. In this example, the function appends the text MouseClick happened to the HTML element textdisplay1. Alternatively, you might use an event handler function to respond to the activated event, like in the following example. function eventHandler(event) { if (event.type === "fullscreenchange") { console.log (“full screen toggle”); } else { console.log (“full screen error”); } } This allows you to manage several types of events from a specific element with one function. For example, you could register an event listener to handle all types of blockchain events on event-based applications. For more information, read about building an event-based application with Amazon Managed Blockchain. An event listener will only be activated after you add it to the respective JavaScript element. To do that, you can use syntax like this: For example, developers can call the following function to bind the click event listener on to a button element. btn.addEventListener("click", RespondMouseClick); You can also add multiple event listeners to a specific event object without overwriting existing event handlers. For example, Amazon Web Services (AWS) allows developers to chain multiple callbacks on the AWS.Request object. For more information, read how to use a request object event listener on AWS. Here’s an explanation of the parameters in the previous syntax: Event listeners remain active until you remove them from the associated JavaScript elements. You can use the following syntax to do so. element.removeEventListener(type, listener, useCapture); Event listener removal parameters are similar to ones you use to add event listeners. When you remove an event listener, you must specify the same type, listener, and useCapture parameters. If you don’t, the event listener will remain active and keep triggering for future events. For example, you can add an event with the following code. button.addEventListener("click", RespondMouseClick, true); But applying the following code fails to remove the event listener. That’s because the useCapture value differs from the one registered with the button object. button.removeEventListener("click", RespondMouseClick, false); To successfully remove the event and prevent it from being triggered, you can use the following code. button.removeEventListener("click", RespondMouseClick, true); Nested event listeners are event handlers added to HTML elements at different hierarchical layers. In the following HTML example, the document owns the underlying parent element, while the parent owns the child. <div class="document"> <div class="parent"> <div class="child"></div> </div> </div> Complex web applications might have multiple parent-child layers with respective event listener functions. When a particular event occurs, it triggers event listeners at different layers in a particular order. For example, clicking a child button will propagate the event to all handlers that capture a mouse click. Events can propagate in two modes—bubbling and capturing. Bubbling is the default mode of JavaScript event handling. It propagates the event from the innermost layer to the outermost layer. For example, a user could hover over a textbox in the child section. Then, the application could pass the event in the following order: To set up event bubbling, use the following syntax: Event capturing is a special event handling mode in JavaScript where the event propagates inward from the outermost layer. Once the event reaches the target element at the inner layer, the event handling mode changes to bubbling. Then, bubbling propagates the event outward to the topmost layer. For example, a user could click on a child button and start the following sequence: Bubbling and capturing allow you to handle events differently. Bubbling is rarely used as capturing is sufficient to handle most events in applications. When you decide between bubbling and capturing, you should consider the event propagation flow and how it aligns with your application’s programming logic. For example, consider a parent form that consists of two child elements. The first element requires an immediate update when an event occurs at the second element. In this case, you should use the capturing mode. It ensures that the parent event listener processes the event and updates the first element. Then, it passes control to the event listener at the second child element. Events propagate until they reach the end destination in a nested listener arrangement. You have to use specific methods to stop the event from propagating further. The following method halts the event at the event listener. event.stopPropagation(); For example, if you call StopPropagation at the child button, the mouse click event will not propagate to the parent and document levels. Hence, event listeners at the higher level will not be triggered. StopPropagation only stops the current type of event from propagating. If the object has different types of event listeners registered to it, they still trigger despite the StopPropagation call. To stop all events related to a specific object, you can use the StopImmediatePropagation method, as follows. event.stopImmediatePropagation(); When one event listener calls StopImmediatePropagation, no other event listeners associated with the object are triggered. Amazon Web Services (AWS) offers AWS SDK for JavaScript so you can easily use services in your applications with libraries and APIs. You can use the SDK to develop server-side, web, and mobile web applications. The SDK supports JavaScript runtime, Node.JS, and React Native, as well as cross-runtime. This allows developers to run the same client service package on different platforms. Here are other benefits of using the SDK: Get started with JavaScript applications by signing up for an AWS account today.Event handler syntax \n
\n
Parameters for adding events \n
\n
Event bubbling \n
\n
\n
Event capturing \n
\n
How to choose between bubbling and capturing \n
Stop all event propagation \n
\n
What is an Event Listener?
What is the syntax of the event listener function?
Event listener syntax
Event handler syntax
How do you add an event listener?
Parameters for adding events
How do you remove an event listener?
How do nested event listener functions work?
Event bubbling
Event capturing
How to choose between bubbling and capturing
How do you stop event propagation in nested event listener functions?
Stop all event propagation
How can AWS support your JavaScript requirements?