Events & Event Listeners — Free JavaScript Tutorial

TL;DR: Learn Events & Event Listeners in JavaScript with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.

Events & Event Listeners in JavaScript

Events are actions that happen in the browser: clicks, key presses, form submissions, mouse movements, etc. JavaScript responds to events using addEventListener(eventType, function).

The event object (e) passed to the handler has useful properties: e.target (element that triggered event), e.key (key pressed), e.preventDefault() (stop default behavior like form submit).

Event delegation: instead of adding listeners to each child, add one listener to the parent and check e.target. This is more efficient and works for dynamically added elements.

element.addEventListener("click", function(e) {
  // handle event
  console.log(e.target);  // element clicked
});

element.addEventListener("keydown", e => {
  if (e.key === "Enter") { ... }
});

Learn Events & Event Listeners step by step with Syllab's free interactive JavaScript tutorial — runnable code examples, practice exercises and instant AI feedback, all free with no signup. Explore the full JavaScript course →