JS Events

Events let JavaScript respond to user actions like clicks, typing, and form submissions.

Adding Event Listeners

const btn = document.getElementById("my-btn");

btn.addEventListener("click", function(event) {
  console.log("Button clicked!", event);
});

// Arrow function shorthand
btn.addEventListener("click", (e) => {
  console.log("Clicked:", e.target);
});

Common Events

Event	Fires when
`click`	Element is clicked
`dblclick`	Element is double-clicked
`mouseover` / `mouseout`	Mouse enters / leaves
`keydown` / `keyup`	Key pressed / released
`input`	Input value changes
`change`	Input loses focus after change
`submit`	Form is submitted
`focus` / `blur`	Element gains / loses focus
`load`	Page or resource fully loaded
`DOMContentLoaded`	HTML parsed (before images load)

// Form submit — prevent page reload
const form = document.querySelector("form");
form.addEventListener("submit", (e) => {
  e.preventDefault();
  const data = new FormData(form);
  console.log(data.get("email"));
});

// Keyboard events
document.addEventListener("keydown", (e) => {
  if (e.key === "Escape") closeModal();
  if (e.ctrlKey && e.key === "s") saveDocument();
});

// Run code after DOM is ready
document.addEventListener("DOMContentLoaded", () => {
  console.log("Page ready!");
});

Event Delegation

Instead of adding listeners to each child, listen on the parent — works for dynamic elements too:

document.querySelector("ul").addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    e.target.classList.toggle("done");
  }
});

Use addEventListener over inline onclick attributes — it keeps JavaScript separate from HTML, allows multiple listeners, and can be removed with removeEventListener.

Adding Event Listeners

Common Events

Event Delegation

Test Yourself