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.
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.
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.
