Events & User Interaction

const button = document.querySelector("#submit-btn");

// addEventListener(event, handler)
button.addEventListener("click", function(event) {
  console.log("Button clicked!");
  console.log(event);  // the event object — contains details
});

// Arrow function syntax
button.addEventListener("click", (event) => {
  event.preventDefault();  // stop default browser behaviour (e.g., form submit)
  console.log("Clicked at", event.clientX, event.clientY);
});

// Named function (easier to remove later)
function handleClick(event) {
  console.log("Clicked:", event.target);  // the element that was clicked
}
button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);  // remove it

// Mouse events
element.addEventListener("click",      handler);   // single click
element.addEventListener("dblclick",   handler);   // double click
element.addEventListener("mouseenter", handler);   // mouse enters
element.addEventListener("mouseleave", handler);   // mouse leaves
element.addEventListener("mousemove",  handler);   // mouse moves

// Keyboard events
document.addEventListener("keydown",   handler);   // key pressed
document.addEventListener("keyup",     handler);   // key released

// Form events
form.addEventListener("submit", (e) => {
  e.preventDefault();  // stop page from reloading
  const data = new FormData(form);
  console.log(data.get("name"));
});
input.addEventListener("input",  handler);  // value changes
input.addEventListener("change", handler);  // blur after change
input.addEventListener("focus",  handler);  // input focused
input.addEventListener("blur",   handler);  // input unfocused

// Page events
window.addEventListener("load",   handler);   // page fully loaded
window.addEventListener("resize", handler);   // window resized
window.addEventListener("scroll", handler);   // page scrolled

const list = document.querySelector(".course-list");

list.addEventListener("click", (event) => {
  // Check if the clicked element is a list item
  if (event.target.matches("li")) {
    event.target.classList.toggle("selected");
    console.log("Selected:", event.target.textContent);
  }
});
// Works even for <li> elements added to the list later