20 min25 XP

Event Objects

Understanding the Event Parameter

Step 1 of 5

What is the Event Object?

When an event happens, JavaScript creates an event object that contains all the information about that event. This object is automatically passed to your event handler function!

The Event Parameter:

Event handlers receive the event object as their first parameter. You can call it anything, but "event", "e", or "evt" are common:

  • ✓ function(event)
  • ✓ function(e)
  • ✓ function(evt)
// Event object example
button.addEventListener('click', function(event) {
// 'event' contains info about the click
console.log(event.type) // 'click'
console.log(event.target) // The button element
})

Why Event Objects Matter

Event objects give you powerful information:

  • Which element was clicked/typed/hovered
  • Where the mouse was on the screen
  • Which key was pressed
  • Whether Ctrl, Shift, or Alt were held down
  • The exact time the event happened