Event.
The element on which an event actually occurred, for example the clicked button inside a list.
- Returns
- The element (or other object) where the event started.
Example
#const answers = document.querySelector('#answers')
answers.addEventListener('click', (event) => {
console.log('target:', event.target)
console.log('currentTarget:', event.currentTarget)
console.log('Selected answer', event.target.textContent)
})
answers.children[1].click()The last line simulates a click on answer B. Click a different answer in the preview to see how target changes, while currentTarget stays the same.
Definition and usage
#The event.target property points to the element where the event started, for example the exact button or list item the user clicked. Next to it is event.currentTarget, the element the currently running handler function is attached to.
The difference matters, because most events propagate up the tree (so-called bubbling): clicking a list item also triggers the handler on the list itself, its parent, and so on up to document. That lets you attach a single function to the parent and check event.target, instead of adding a handler to every child. This technique is called event delegation, and it also works for elements added later.
event.target can be an element nested deeper than you’d expect, e.g. a <span> icon inside a button. That’s why, with delegation, you usually look for the right element with event.target.closest(selector).
Syntax
#event.target
event.currentTargetMore examples
#const todo = document.querySelector('#todo')
todo.addEventListener('click', (event) => {
if (event.target.tagName === 'LI') {
event.target.classList.toggle('done')
console.log(`${event.target.textContent}: ${event.target.className}`)
}
})
const newItem = document.createElement('li')
newItem.textContent = 'Lesson 2'
todo.append(newItem)
newItem.click()document.addEventListener('click', (event) => {
console.log(event.target)
console.log(event.target.closest('.like'))
})
document.querySelector('.icon').click()Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- With event delegation, use
event.target.closest(selector), since the click might have landed on a nested element, e.g. an icon inside a button. - In a handler function,
event.currentTargetalways points to the element the handler is attached to, whileevent.targetis the element actually clicked. - In form fields, read the typed value through
event.target.value.
Related entries
#- EventTarget.addEventListener()Registers a function that’s called every time a given event occurs on an element, for example a click.
- Element.closest()Returns the nearest ancestor (or the element itself) matching a CSS selector, or null.
- Event.preventDefault()Blocks the browser’s default action for an event, for example submitting a form or following a link’s address.
- HTMLElement.datasetAn object with an element’s data-* attribute values, for reading and storing your own data.
- Element.classListAn object for adding, removing, toggling, and checking an element’s CSS classes.
Spotted a mistake or missing an example? Write to us.