How to addEventListener() in Javascript

Key takeaways:
The addEventListener() method allows us to register event handlers on specified elements, making web pages interactive and dynamic.
It supports multiple event listeners on a single element, improving flexibility compared to traditional event-handling methods like onclick.
The method provides control over the event flow, allowing event capturing or bubbling through the optional useCapture parameter.
Common events handled by addEventListener() include click, mouseover, keydown, submit, and many more.
JavaScript allows attaching an unlimited number of event listeners to an element, although performance could be affected by an excessive number.

Event handling is a fundamental part of creating interactive web applications. By using the addEventListener() method, we can efficiently respond to user actions like clicks, mouse movements, or keyboard events. It makes our web pages dynamic and engaging.

What is `addEventListener()`?

The addEventListener() method is used in JavaScript to register an event handler on a specified element. It is more flexible than older event-handling methods, such as onclick, because it allows multiple event listeners to be attached to the same element and gives more control over how events are captured and handled. It allows us to specify which event type to listen for and the function to execute when that event occurs.

The addEventListener() method is supported in many browsers such as Google Chrome, Mozilla Firefox, Safari, Opera, and the latest versions of Internet Explorer.

Syntax

The addEventListener() method has the following syntax:

In the above syntax:

event: It is a required parameter. It is a string that specifies the name of the event (e.g., click, keypress).
function: The function is supposed to be executed when the event is clicked. The function can be both internal and external functions. It is also a required parameter.
useCapture: An optional boolean value that determines whether the event should be captured during the capturing phase (true) or the bubbling phase (false). The default value is false.

Adding an event listener to an element

Let’s start with a simple example, where we add a click event listener to a button.

In the above code:

Line 6: We create a button element with the ID myBtn.
Line 11–14: We use the document.getElementById() to select the myBtn and call the addEventListener() on it, specifying that we are listening for a click event. This button will trigger an event when clicked. When the button is clicked, the function inside addEventListener() executes. Inside this function:
- Line 13: We use document.write() to output the message Welcome to Educative! to the web page, replacing the current content of the document.
- Line 14: We also use console.log("Button clicked!") to log a message to the browser’s console indicating that the button was clicked.

Using multiple event listeners

We can attach multiple event listeners to the same element. Let’s add a click event and a mouseover event to a button.

In the above code:

Lines 16–18: We attach a second mouseover event listener that logs a message to the console when the mouse hovers over the button.

Common event listeners in JavaScript

In addition to the examples we’ve seen, JavaScript provides many types of event listeners using the addEventListener() method. Here’s a list of some of the most common event listeners we can use:

click: Triggered when an element is clicked.
dblclick: Triggered when an element is double-clicked.
mouseover: Triggered when the mouse hovers over an element.
mouseout: Triggered when the mouse leaves an element.
keydown: Triggered when a key is pressed on the keyboard.
keyup: Triggered when a key is released on the keyboard.
keypress: Triggered when a key is pressed (deprecated, use keydown, or keyup instead).
mousedown: Triggered when a mouse button is pressed on an element.
mouseup: Triggered when a mouse button is released over an element.
mousemove: Triggered when the mouse pointer moves over an element.
scroll: Triggered when the user scrolls the content of an element.
submit: Triggered when a form is submitted.
focus: Triggered when an element gains focus (such as an input field).
blur: Triggered when an element loses focus.
resize: Triggered when the window is resized.
input: Triggered when the value of an <input>, <textarea>, or <select> element is changed.
change: Triggered when the value of an input element is changed and the element loses focus.
contextmenu: Triggered when the right mouse button is clicked (or a context menu is triggered).
load: Triggered when the entire page (including images, scripts, etc.) has finished loading.
unload: Triggered when the user navigates away from the page.

By combining different event listeners, we can build highly interactive and dynamic web pages that respond to various user actions. There is no strict upper limit imposed on the number of event listeners we can add to an element, but adding an excessive number can impact performance.

You can explore our JavaScript Catalog to learn everything from basics to advanced concepts!

Knowledge test

Let’s attempt a short quiz to assess your understanding.

Frequently asked questions

Haven’t found what you were looking for? Contact Us

What is an event listener in JavaScript?

An event listener in JavaScript is a function that waits for a specific event to occur on an HTML element (like a button, link, or input field) and responds to it. The addEventListener() method is commonly used to attach event listeners to elements. It listens for events such as click, mouseover, keydown, etc., and runs a callback function when the event occurs. This allows us to make web pages interactive by responding to user actions.

What is the difference between onclick and addEventListener()?

The onclick is an older, simpler way to assign a single function to be executed when an element is clicked. It only allows one handler per event per element.

The addEventListener(), on the other hand, is more flexible. It allows attaching multiple event listeners to the same element for the same or different events without overwriting existing ones. Additionally, addEventListener() offers more control over event propagation (capturing and bubbling phases).

What is the new event listener in JavaScript?

While the addEventListener() method has been a core part of JavaScript for a long time, there are newer event-handling patterns available today, such as:

Passive event listeners: Introduced to improve performance, especially for touch and scroll events. These listeners tell the browser that the event handler won’t call preventDefault(), which helps optimize scrolling performance.
```
element.addEventListener('scroll', function() {
  // Scroll handler
}, { passive: true });
```

Once option: Ensures the event listener is triggered only once and then automatically removed.

button.addEventListener('click', () => {
  console.log('Button clicked');
}, { once: true });

These modern options make event handling more efficient and customizable for various use cases.

What is the "addEventListener is not a function" error?

addEventListener is not a function is a JavaScript error that occurs when you try to add an event listener to an object that isn’t a valid DOM element. This happens when you’ve made a mistake in selecting the element, or if the element hasn’t been loaded into the DOM yet. To prevent this, be careful that you’re using the correct selector (e.g., document.getElementById, document.querySelector) to obtain a reference to the element, and that you’re only adding the event listener after the element has been loaded into the DOM.

Free Resources