JS Events

Intro to Events

JavaScript events are actions that happen in the browser: clicking a button, typing in an input, loading a page, and more. You can respond to events using event handlers.

const btn = document.querySelector("#btn");

btn.addEventListener("click", () => {
  console.log("Button clicked");
});

Mouse Events

Mouse events include click, dblclick, mousedown, mouseup, mousemove, mouseenter, mouseleave.

const box = document.querySelector("#box");

box.addEventListener("mouseenter", () => {
  box.classList.add("active");
});

box.addEventListener("mouseleave", () => {
  box.classList.remove("active");
});

You can read mouse position with clientX and clientY.

document.addEventListener("mousemove", (e) => {
  // e.clientX / e.clientY are viewport coordinates
  // console.log(e.clientX, e.clientY);
});

Keyboard Events

Keyboard events are fired when the user interacts with the keyboard: keydown, keyup.

const input = document.querySelector("#search");

input.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    console.log("Enter pressed:", input.value);
  }
});

Useful properties: key, code, and modifier keys.

document.addEventListener("keydown", (e) => {
  if (e.ctrlKey && e.key.toLowerCase() === "s") {
    e.preventDefault();
    console.log("Ctrl+S captured");
  }
});

Load Events

Use DOMContentLoaded to run code after the DOM is ready (recommended). Use load to wait for all resources (images, CSS, etc.).

document.addEventListener("DOMContentLoaded", () => {
  console.log("DOM is ready");
});

window.addEventListener("load", () => {
  console.log("All resources loaded");
});

Timing Events

Timing events allow delayed or repeated execution using setTimeout and setInterval.

const t = setTimeout(() => {
  console.log("Runs once after 1s");
}, 1000);

let count = 0;
const i = setInterval(() => {
  count++;
  console.log("Tick", count);
  if (count === 3) clearInterval(i);
}, 500);

Tip: Prefer requestAnimationFrame for animation loops.

let x = 0;
function animate() {
  x += 1;
  // update DOM here...
  if (x < 60) requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Manage Events

You can control event behavior using preventDefault() and stopPropagation().

Prevent form submission:

const form = document.querySelector("#form");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("Form submit prevented");
});

Stop bubbling (use carefully):

const outer = document.querySelector("#outer");
const inner = document.querySelector("#inner");

outer.addEventListener("click", () => console.log("outer click"));
inner.addEventListener("click", (e) => {
  e.stopPropagation();
  console.log("inner click");
});

Event Examples

Example: toggle a class on click.

const btn2 = document.querySelector("#toggle");
const panel = document.querySelector("#panel");

btn2.addEventListener("click", () => {
  panel.classList.toggle("open");
});

Example: live character counter (input event).

const message = document.querySelector("#message");
const counter = document.querySelector("#counter");

message.addEventListener("input", () => {
  counter.textContent = message.value.length;
});

Event Listener

Use addEventListener to attach handlers. You can remove handlers with removeEventListener if you keep a reference to the function.

const btn3 = document.querySelector("#once");

function handleClick() {
  console.log("Clicked once");
  btn3.removeEventListener("click", handleClick);
}

btn3.addEventListener("click", handleClick);

Modern tip: Use event delegation for lists and dynamic content.

const list = document.querySelector("#list");

list.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item) return;

  console.log("Clicked item id:", item.dataset.id);
});

Next Step

Continue with JS Projects to build small practical examples using DOM + events.