JavaScript DOM Events

Events are actions in the browser — clicks, key presses, form submissions. You listen for them and respond.

Adding Event Listeners

button.addEventListener("click", () => {
  console.log("Clicked!");
});

Syntax: element.addEventListener(event, handler)

Common Events

// Click
button.addEventListener("click", handler);
button.addEventListener("dblclick", handler);

// Keyboard
input.addEventListener("keydown", handler);
input.addEventListener("keyup", handler);

// Form
form.addEventListener("submit", handler);
input.addEventListener("input", handler);

// Window
window.addEventListener("load", handler);
window.addEventListener("resize", handler);

The Event Object

The handler receives an event object with useful properties:

button.addEventListener("click", (event) => {
  console.log(event.type);      // "click"
  console.log(event.target);    // The clicked element
  console.log(event.timeStamp); // When it happened
});

Preventing Default Behavior

Use preventDefault() to stop the browser’s default action:

form.addEventListener("submit", (event) => {
  event.preventDefault();  // Don't submit the form
  // Validate and handle manually
});

Remember: event.preventDefault() stops the default — like form submission or link navigation.

Removing Event Listeners

You must pass the same function reference:

function handleClick() {
  console.log("Clicked!");
  button.removeEventListener("click", handleClick);
}

button.addEventListener("click", handleClick);

Tip: Anonymous functions can’t be removed. Use named functions when you need to remove listeners.

Complete Example: Form Validation

let form = document.getElementById("form");
let nameInput = document.getElementById("name");
let emailInput = document.getElementById("email");
let errorDiv = document.getElementById("errors");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  let errors = [];

  if (nameInput.value.trim() === "") errors.push("Name is required");
  if (!emailInput.value.includes("@")) errors.push("Invalid email");

  if (errors.length > 0) {
    errorDiv.textContent = errors.join("\n");
  } else {
    form.reset();
  }
});

Best Practices

• Use addEventListener — Not inline onclick handlers
• Call preventDefault() when needed — Prevent unwanted reloads
• Remove listeners when done — Prevent memory leaks
• Use event delegation — One listener for dynamic elements
• Check if element exists — Avoid null errors

Common Mistakes

• Forgetting preventDefault() — Page reloads on form submit
• Using anonymous functions — Can’t remove them later
• Adding listener on null — Element must exist first
• Wrong event type — click vs mousedown matters
• Not checking event.target — May handle wrong element