LuisLlamas Logo
javascript-add-event-handlers

How to Add Event Handlers in JavaScript

  • 4 min
  • Intermediate

To react to events in JavaScript, we first need to associate an event handler that will execute when the event occurs.

That is, we must define a function that we want to be triggered when the event happens. And, somehow, we have to associate this function with the event.

This can be done in several ways:

MethodFlexibilityLogic Separation
Inline Attribute ❌LowPoor
Element Property ❌Medium (overwrites others)Medium
addEventListener Method 💚HighHigh

The recommended one is addEventListener. But let’s look at each of them.

Inline Attribute in HTML

One of the simplest ways to add an event is directly in the HTML using the onclick attribute or any other event attribute.

This method is mainly used for events like click, mouseover, keydown, etc.

<button onclick="myFunction()">Click here</button>
Copied!

In this example, the myFunction function will execute when the user clicks the button.

Disadvantages:

  • Difficulty separating JavaScript logic from HTML markup.

Element Property

Another way is to assign a function directly to the event property of a DOM element.

const button = document.getElementById("myButton");

button.onclick = function () {
    alert("Button clicked");
};
Copied!

Disadvantages:

  • Does not allow adding multiple handlers for the same event.

addEventListener Method

The most modern and flexible method for associating functions with events is addEventListener. This method allows adding multiple functions to the same event.

const button = document.getElementById("myButton");

button.addEventListener("click", function () {
    alert("Button clicked with addEventListener");
});
Copied!

Use addEventListener whenever possible.

The addEventListener Method

The addEventListener method is the modern and preferred approach for adding events to DOM elements.

This method has several advantages, such as allowing multiple event handlers to be added to a single element, and we can also remove the event handler later.

Its usage is as follows,

element.addEventListener('eventType', handlerFunction, [options]);
Copied!
  • element: The HTML element to which the event handler will be added.
  • eventType: The type of event to listen for (e.g., 'click', 'submit', 'keydown').
  • handlerFunction: The function that will execute when the event occurs.
  • options (optional): An object that can specify whether the event should be captured during the capture or bubbling phase.

Removing an Event Handler

To remove an event handler, use removeEventListener. You must pass exactly the same event type and the same function that were used to add the handler.

function handleClick() {
  alert('Button clicked!');
}

button.addEventListener('click', handleClick);
button.removeEventListener('click', handleClick);
Copied!

In this case, handleClick will be removed and will no longer execute on future clicks.

Types of Functions Associated with Events

When associating a function with an event, you can choose anonymous functions, pre-defined functions, or even arrow functions.

An anonymous function is defined directly where the event handler is assigned. It’s useful for handling simple events.

button.addEventListener('click', function() {
    console.log('Button clicked!');
});
Copied!

A named function is a function that has a name and can be defined separately. This is useful for handling more complex events and when the event handler needs to be reused.

function handleClick() {
    console.log('Button clicked!');
}

button.addEventListener('click', handleClick);
Copied!

Arrow functions provide a more concise syntax and do not have their own this context, which can be useful in certain cases.

button.addEventListener('click', () => {
    console.log('Button clicked!');
});
Copied!

Event Delegation

Event delegation is an advanced technique that allows handling events on child elements using a single handler on a parent element.

This is useful when you have dynamically generated elements or a large number of similar elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Event Delegation</title>
</head>
<body>
    <ul id="myList">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

    <script>
        document.getElementById('myList').addEventListener('click', function(event) {
            if (event.target.tagName === 'LI') {
                alert('List item clicked: ' + event.target.textContent);
            }
        });
    </script>
</body>
</html>
Copied!

In this example,

  • The event handler is assigned to the ul
  • It responds to clicks on any li inside it.

On this page