What Are Events?

Events are actions that happen in the browser — clicks, key presses, mouse movement, loading a page, scrolling, etc. JavaScript can detect and react to all of these.

Click Event

<button id="btn">Click Me</button>

<script>
document.getElementById("btn").addEventListener("click", () => {
  alert("Button clicked!");
});
</script>
      

Mouse Events

element.addEventListener("mouseover", () => {
  console.log("Mouse is over!");
});
      

element.addEventListener("mouseout", () => {
  console.log("Mouse left!");
});
      

Keyboard Events

document.addEventListener("keydown", (e) => {
  console.log("You pressed:", e.key);
});
      

Input Event (Live Typing Detection)

<input id="text">

<script>
document.getElementById("text").addEventListener("input", (e) => {
  console.log("Typed:", e.target.value);
});
</script>
      

Change Event

Triggers when the user finishes editing input:

<input id="age" type="number">

<script>
document.getElementById("age").addEventListener("change", () => {
  console.log("Value changed!");
});
</script>
      

Submit Event

<form id="login">
  <input type="text" placeholder="Username">
  <button>Login</button>
</form>

<script>
document.getElementById("login").addEventListener("submit", (e) => {
  e.preventDefault(); // stops page refresh
  console.log("Form submitted!");
});
</script>
      

Scroll Event

window.addEventListener("scroll", () => {
  console.log("Scrolling...");
});
      

Window Load Event

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

Practical Example — Dark Mode Toggle

<button id="toggle">Dark Mode</button>

<script>
let dark = false;

document.getElementById("toggle").addEventListener("click", () => {
  dark = !dark;

  if (dark) {
    document.body.style.background = "#000";
  } else {
    document.body.style.background = "#121212";
  }
});
</script>
      

Why Events Matter

• Enable interaction
• Make sites dynamic
• Trigger animations
• React to user input
• Build games, dashboards, forms

What’s Next?

Next you’ll learn how to use CSS Grid Layout to build more advanced UI structures.