EventTarget.
Registers a function that’s called every time a given event occurs on an element, for example a click.
- Returns
undefined
Example
#const button = document.querySelector('#like')
let likes = 0
button.addEventListener('click', () => {
likes += 1
button.textContent = `Likes: ${likes}`
console.log('Clicked, likes:', likes)
})
button.click()
button.click()The last two lines simulate clicks with button.click(), so the result appears right away. Click the button in the preview and the console will show more entries.
Definition and usage
#The addEventListener() method connects an event to a handler function. The first argument is the event type (e.g. "click", "input", "submit", "keydown"), and the second is a function that receives an event object with information about what happened.
You can register several functions for the same event on one element. They run in the order they were added. The method works on elements, but also on document and window, for example to handle keyboard shortcuts or window resizing.
The third argument is an options object: once: true removes the handler after it fires once, passive: true tells the browser the function won’t block scrolling, and signal lets you detach the handler through an AbortController. You can also remove a handler with removeEventListener(), but you must pass it the exact same function, so an anonymous function won’t work for that.
Syntax
#target.addEventListener(type, listener)
target.addEventListener(type, listener, options)
target.removeEventListener(type, listener)Parameters
#type
string
The event type, e.g."click","input","submit", or"keydown". Without theonprefix.listener
function (event)
The function called every time the event occurs. It receives the event object.options
optional object
Settings:once,passive,capture, andsignal.
More examples
#const bonus = document.querySelector('#bonus')
bonus.addEventListener('click', () => console.log('Bonus claimed: +50 coins'), { once: true })
bonus.click()
bonus.click()const input = document.querySelector('#nick')
input.addEventListener('input', (event) => {
console.log(`Typed: ${event.target.value}`)
})
input.value = 'Emma'
input.dispatchEvent(new Event('input'))The input event fires on every change to the field’s content. Here we trigger it manually with dispatchEvent(), and when you type something into the field in the preview, the console will show more values.
const button = document.querySelector('#hint')
let used = 0
function showHint() {
used += 1
console.log(`Hint ${used} of 2`)
if (used === 2) button.removeEventListener('click', showHint)
}
button.addEventListener('click', showHint)
button.click()
button.click()
button.click()Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Pass the function itself, not its result:
addEventListener("click", save), notaddEventListener("click", save()). - Instead of adding a handler to every one of many elements, add a single one to their shared parent and check
event.target. This is called event delegation. - If you plan to remove a handler later, store the function in a variable.
removeEventListener()needs that exact same function.
Related entries
#- Event.targetThe element on which an event actually occurred, for example the clicked button inside a list.
- Event.preventDefault()Blocks the browser’s default action for an event, for example submitting a form or following a link’s address.
- EventTarget.removeEventListener()Detaches an event handler function added earlier with addEventListener(). Requires the same function and the same event type.
- Element.closest()Returns the nearest ancestor (or the element itself) matching a CSS selector, or null.
- document.querySelector()Returns the first element that matches a CSS selector, or null when nothing matches.
- () => {}An arrow function: a shorter function syntax, with no own this, and an implicit return for a single expression.
Spotted a mistake or missing an example? Write to us.