Platform under construction

Events & Forms

Advanced

Event Object

The event object contains details about what happened: target, currentTarget, key, pointer position, default behavior and more.

button.addEventListener("click", event => {
  console.log(event.target);
  console.log(event.currentTarget);
});

Events & Forms

The event object is the context for the event.

Most event handlers receive an event object as their first argument. It tells you what fired the event and provides event-specific data.

target is where the event started. currentTarget is the element whose listener is currently running. They are often different when events bubble.

Methods such as preventDefault and stopPropagation change how the browser continues after the event.

target

The original element that started the event.

currentTarget

The element handling the current listener.

preventDefault

Stops the browser default action when appropriate.

Event-specific data

key, pointer coordinates, input type and more.

Examples

Event code should respect how people actually use the interface.

Use currentTarget for the element with the listener

button.addEventListener("click", event => {
  event.currentTarget.disabled = true;
});

Assuming target is always the button

button.addEventListener("click", event => {
  event.target.disabled = true;
});

// target could be a nested span or icon.

Code patterns

Reusable examples for quick reference.

These examples are the event patterns you will reuse constantly: listen, inspect, prevent, delegate, validate and submit.

Read target

Useful for delegated events.

list.addEventListener("click", event => {
  console.log(event.target);
});

Use currentTarget

The element the listener was attached to.

button.addEventListener("click", event => {
  event.currentTarget.disabled = true;
});

Prevent form submit navigation

Only when handling submission yourself.

form.addEventListener("submit", event => {
  event.preventDefault();
});

Read keyboard key

Keyboard events expose key.

window.addEventListener("keydown", event => {
  if (event.key === "Escape") closePanel();
});

Rules that matter

Make interaction predictable.

Events are user-facing code. Good handlers stay small, respect native behavior and keep visual, semantic and data state aligned.

Know target versus currentTarget

They answer different questions.

Use preventDefault carefully

Do not block useful browser behavior without replacing it.

Avoid unnecessary stopPropagation

It can make other features impossible to observe.

Read event-specific properties

Keyboard, pointer and form events expose different details.

Do not rely on globals

Use the event argument instead of window.event.

Keep event data local

Extract what you need and pass it to smaller functions.

Production thinking

Strong event handling makes an interface feel reliable instead of accidental.

Why does this matter?

Understanding the event object prevents the classic bug where a handler changes the wrong element.

Accessibility

Keyboard and form events carry data that helps you support non-mouse interaction correctly.

Production note

Production handlers should use the event object deliberately and avoid blocking default behavior without a reason.

SEO note

Form and link behavior should remain predictable when scripts fail or events are not attached.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Click the text inside the button and compare target.
Add event.preventDefault and explain whether it changes anything.
Log event.type.

Practice assignment

Do this before moving to the next topic.

Read event.target.
Read event.currentTarget.
Explain when they differ.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Event Object.