Difference between addEventListener & Event Handlers in JavaScript

Photo by Florian Olivo on Unsplash

Imagine you have a button in your web page, and you want something to happen when a user clicks on it.

Here’s how you can do it using an event handler:

<button id="myButton">Click me!</button>

<script>
  // Get the button element by its ID
  const button = document.getElementById('myButton');  // Define a function to run when the button is clicked
  function handleClick() {
    alert('Button clicked!');
  }  // Attach the function to the button's click event
  button.onclick = handleClick;
</script>

In this example:

1. We select the button element using getElementById.
2. We create a function called handleClick, which will be executed when the button is clicked. In this case, it shows an alert.
3. We assign the handleClick function to the button's onclick property. This is the event handler in action. When the button is clicked, the handleClick function gets called.

addEventListener: The Modern Approach

While event handlers work well, they have some limitations, especially when you want to attach multiple functions to the same event.

This is where the addEventListener method shines:

<button id="myButton">Click me!</button>

<script>
  // Get the button element by its ID
  const button = document.getElementById('myButton');  // Define the first function to run when the button is clicked
  function firstFunction() {
    alert('First function');
  }  // Define the second function to run when the button is clicked
  function secondFunction() {
    alert('Second function');
  }  // Use addEventListener to attach the functions to the button's click event
  button.addEventListener('click', firstFunction);
  button.addEventListener('click', secondFunction);
</script>

In this example:

1. We select the button element as before.
2. We define two functions, firstFunction and secondFunction, to run when the button is clicked.
3. We use addEventListener to attach both functions to the button's click event. Now, when the button is clicked, both functions are executed in the order they were added.

Key Differences

Now, let’s clarify the main differences between event handlers and addEventListener:

1. Multiple Event Listeners

• Event Handlers: You can only attach one event handler per event type to an element. If you assign a new function to an event handler, it replaces the previous one.
• addEventListener: You can attach multiple event listeners to the same event type on an element. They will all be executed in the order they were added.

2. Clearer Separation of Concerns

• Event Handlers: Functions and event handling logic are mixed together, which can make your code less organized as your project grows.
• addEventListener: Promotes a cleaner separation of concerns by allowing you to define event handling logic separately from the element and event type.

3. Removing Event Listeners

• Event Handlers: Removing event handlers can be tricky and may require setting the event handler to null.
• addEventListener: Provides a straightforward method, removeEventListener, to remove specific event listeners when they are no longer needed.

Conclusion

Both event handlers and addEventListener have their places in JavaScript, and choosing between them depends on your specific use case.

If you need a simple solution and only one function to handle an event, event handlers work fine.

However, if you require more complex interactions, multiple event listeners, or a cleaner code structure, addEventListener is the modern choice that gives you greater flexibility and control over your event handling.