The Event Object

Every event handler receives an event object as its first argument. The previous lessons used event.target and event.key — those are two of many properties. This lesson covers the full picture.

The event object is automatic

The browser creates and passes the event object — you do not create it. Name it whatever you like, but event or e are standard:

btn.addEventListener('click', (event) => {
  console.log(event);  // the full event object
});

// Same thing, shorter name
btn.addEventListener('click', (e) => {
  console.log(e.type);  // 'click'
});

Universal properties

Every event object has these properties regardless of event type:

Property	Type	What it contains
event.type	string	'click', 'input', 'keydown', etc.
event.target	element	The element the event originated on
event.currentTarget	element	The element the listener is attached to
event.timeStamp	number	Milliseconds since page load when the event fired
event.bubbles	boolean	Whether the event bubbles up the DOM

document.addEventListener('click', (event) => {
  console.log(event.type);          // 'click'
  console.log(event.target);        // whatever was clicked
  console.log(event.timeStamp);     // e.g. 3847.2
});

Mouse event properties

click, mousedown, mouseup, mousemove, and mouseover events add coordinate and button data:

Property	What it contains
event.clientX / event.clientY	Position relative to the viewport
event.pageX / event.pageY	Position relative to the full page
event.button	0 = left, 1 = middle, 2 = right
event.ctrlKey	true if Ctrl was held when clicked
event.shiftKey	true if Shift was held
event.altKey	true if Alt was held

document.addEventListener('click', (event) => {
  console.log(`Clicked at ${event.clientX}, ${event.clientY}`);
  if (event.shiftKey) {
    console.log('Shift + click');
  }
});

Keyboard event properties

keydown, keyup, and keypress (deprecated) events add key information:

Property	What it contains
event.key	The logical key value: 'a', 'Enter', 'ArrowUp'
event.code	The physical key: 'KeyA', 'Enter', 'ArrowUp'
event.ctrlKey	true if Ctrl held
event.shiftKey	true if Shift held
event.altKey	true if Alt held
event.repeat	true if the key is being held down (repeated)

document.addEventListener('keydown', (event) => {
  console.log(event.key);     // 'a', 'A', 'Enter', ' '
  console.log(event.code);    // 'KeyA', 'Enter', 'Space'
  console.log(event.repeat);  // true if held down
});

Exercise

On the STO site, attach a click listener to the tours grid and log event data for every click:

const container = document.querySelector('.tours-grid');

if (container) {
  container.addEventListener('click', (event) => {
    console.log('Event type:', event.type);
    console.log('Target:', event.target);
    console.log('Target tag:', event.target.tagName);
    console.log('Coordinates:', event.clientX, event.clientY);
    console.log('Timestamp:', event.timeStamp.toFixed(0), 'ms');
  });
}

Click different parts of a tour card — the heading, the price, the button. Watch how event.target changes while event.currentTarget stays the same (the container). This is the difference between where the click originated and where the listener lives.

Then try attaching a keydown listener to the document and pressing a few keys including Shift + a letter:

document.addEventListener('keydown', (event) => {
  console.log(`Key: "${event.key}"  Code: "${event.code}"  Shift: ${event.shiftKey}`);
});

Recap

• The event object is automatically passed to every handler — name it event or e.
• Universal properties available on every event: type, target, currentTarget, timeStamp, bubbles.
• Mouse events add clientX/clientY, pageX/pageY, button, and modifier keys (ctrlKey, shiftKey, altKey).
• Keyboard events add key (logical value), code (physical key), modifier keys, and repeat.
• Clicking different elements inside a container reveals the target vs currentTarget distinction — the key concept behind event delegation.