How to Handle Events in JavaScript

// Add event listener
const button = document.querySelector("#myButton");
button.addEventListener("click", (event) => {
  console.log("Button clicked!");
  console.log("Target:", event.target);
});

// Remove event listener
function handleClick() {
  console.log("Clicked");
}
button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

// Event types
document.addEventListener("click", (e) => console.log("click"));
document.addEventListener("dblclick", (e) => console.log("dblclick"));
document.addEventListener("keydown", (e) => console.log(e.key));
document.addEventListener("keyup", (e) => console.log(e.key));
document.addEventListener("mousemove", (e) => {
  console.log(`Mouse: ${e.clientX}, ${e.clientY}`);
});
document.addEventListener("scroll", (e) => console.log("scrolled"));
window.addEventListener("resize", (e) => console.log("resized"));

// Event delegation
document.querySelector("#list").addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    console.log("Clicked:", e.target.textContent);
  }
});

// Prevent default behavior
document.querySelector("form").addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("Form submission prevented");
});

// Stop propagation
document.querySelector("#child").addEventListener("click", (e) => {
  e.stopPropagation();
  console.log("Child clicked");
});

// Once listener
button.addEventListener("click", () => {
  console.log("This runs only once");
}, { once: true });

// Passive listener (better scroll performance)
document.addEventListener("scroll", () => {
  console.log("scrolling");
}, { passive: true });

// Custom events
const event = new CustomEvent("myEvent", {
  detail: { message: "Hello" }
});
button.dispatchEvent(event);

button.addEventListener("myEvent", (e) => {
  console.log(e.detail.message);
});

// Keyboard shortcuts
document.addEventListener("keydown", (e) => {
  if (e.ctrlKey && e.key === "s") {
    e.preventDefault();
    console.log("Save shortcut");
  }
});