3 Ways to Apply Event Listeners in JavaScript
Event handling is an important concept in JavaScript. Events enable HTML pages to be dynamic and interactive, letting you create appealing user interfaces. You can write code to run JavaScript when an event occurs on the DOM.
An event can be when a user clicks an HTML element, the page loads, or when an input field’s value changes. You can write code that alters the HTML structure when an event occurs. Learn three different ways you can add event listeners to your code.
1. The addEventListener Method
The addEventListener method is one of the popularevent listener methods. It has three parameters:
The event can be any specified DOM event on a target element. A function is set up to respond to that event when it occurs.
The function can be anonymous or a named function. Popular targets include an element, its children, a document, and a window that supports an event.
The addEventListener() is a recommended method to administer event listeners in JavaScript. It works on any event target, not just HTML elements, and supports multiple event handlers.
You may want to execute some code on the DOM. You can print text, perform calculations, or display an image when a user clicks the button.
Let’s illustrate with the following code:
Next, add the event listener using the button.
When you click the button, the text ‘Function Executed’ prints on the screen, as shown below.
2. Delegating Events to addEventListener
Delegating an event in JavaScript is a pattern used to handle multiple events. Instead of adding an event listener to each element, you only add the event listener to an ancestor element. You can access the element that triggered the event via the.targetproperty of the event object.
This ensures that all the elements you target have shared behavior. Without it, you would have to add an event listener to each one manually.
Here’s an example of event delegation:
Next, add the events listeners to all the buttons with just a few lines of code.
Event delegation is a pattern based on Event bubbling. Event bubbling happens when an element receives an event and transmits it to its parent and ancestor elements in the DOM. It is anevent propagationconcept that happens by default in JavaScript.
3. Using the onclick Attribute
you’re able to use the onclick attribute to run JavaScript when users click on an element. Like the addEventListener method, you can use the onclick method to print text, perform calculations, and change element features onthe DOM.
You can add the onclick event listener as an inline event handler to the HTML element. The event occurs when a user clicks on the element. Change the color of the following paragraph dynamically with the onclick method:
In the JavaScript file, add the following code:
The output will appear as shown:
Why Learn About Event Listeners?
As a JavaScript developer, you will often use event listeners in projects. You can create numerous features with event listeners, including bubbling and capturing events. Understanding these concepts will make it easier for you to create dynamic interfaces on your applications.
Walking the DOM is a handy technique you may use in your web apps with just a little practice.
I found my TV was always listening—so I shut it down.
Sometimes the smallest cleaning habit makes the biggest mess.
Tor spoiled me forever.
You’ve been quoting these famous films wrong all along!
My foolproof plan is to use Windows 10 until 2030, with the latest security updates.
