Event Handling and Interaction APIs

// Basic event listener
button.addEventListener("click", (event) => {
  console.log("Button clicked!", event);
});

// Options object - once option
button.addEventListener("click", handleClick, { "once": true });
// Automatically removed after first click

// Passive listener for scroll performance
document.addEventListener("scroll", handleScroll, { "passive": true });
// Cannot call event.preventDefault()

// Capture phase
parent.addEventListener("click", handleCapture, { "capture": true });
// Fires before child's event

// Remove event listener
const handler = (e) => console.log(e);
button.addEventListener("click", handler);
button.removeEventListener("click", handler); // Must use same function reference

// AbortController for easy removal
const controller = new AbortController();
button.addEventListener("click", handleClick, { "signal": controller.signal });
button2.addEventListener("click", handleClick2, { "signal": controller.signal });
// Remove all listeners at once
controller.abort();

// Simple custom event
const simpleEvent = new Event("userLogin", {
  "bubbles": true,
  "cancelable": true
});
element.dispatchEvent(simpleEvent);

// CustomEvent with data payload
const customEvent = new CustomEvent("dataUpdate", {
  "bubbles": true,
  "detail": {
    "userId": 123,
    "timestamp": Date.now(),
    "changes": ["name", "email"]
  }
});
element.dispatchEvent(customEvent);

// Listen for custom event
element.addEventListener("dataUpdate", (event) => {
  console.log("User ID:", event.detail.userId);
  console.log("Changes:", event.detail.changes);
});

// Dispatch with return value check
const event = new CustomEvent("beforeSave", {
  "cancelable": true,
  "detail": { "data": formData }
});
const allowed = element.dispatchEvent(event);
if (!allowed) {
  console.log("Save was prevented by listener");
}

// Simulate mouse click
const clickEvent = new MouseEvent("click", {
  "bubbles": true,
  "cancelable": true,
  "clientX": 100,
  "clientY": 200,
  "button": 0 // Left button
});
button.dispatchEvent(clickEvent);

// Simulate keyboard event
const keyEvent = new KeyboardEvent("keydown", {
  "key": "Enter",
  "code": "Enter",
  "keyCode": 13,
  "bubbles": true,
  "cancelable": true,
  "ctrlKey": false,
  "shiftKey": false
});
input.dispatchEvent(keyEvent);

// Simulate input event
const inputEvent = new InputEvent("input", {
  "bubbles": true,
  "data": "text",
  "inputType": "insertText"
});
textarea.dispatchEvent(inputEvent);

// Unified pointer handling (mouse, touch, pen)
element.addEventListener("pointerdown", (event) => {
  console.log("Pointer type:", event.pointerType); // "mouse", "touch", "pen"
  console.log("Pointer ID:", event.pointerId);
  console.log("Primary:", event.isPrimary);
  console.log("Pressure:", event.pressure);
  console.log("Position:", event.clientX, event.clientY);
  
  // Capture pointer for drag operation
  element.setPointerCapture(event.pointerId);
});

element.addEventListener("pointermove", (event) => {
  if (event.pointerType === "touch") {
    // Handle touch-specific behavior
  }
});

element.addEventListener("pointerup", (event) => {
  element.releasePointerCapture(event.pointerId);
});

// Prevent touch scrolling while drawing
canvas.addEventListener("touchstart", (event) => {
  event.preventDefault();
}, { "passive": false });

// Track multiple simultaneous touches
element.addEventListener("touchstart", (event) => {
  console.log("Active touches:", event.touches.length);
  console.log("Target touches:", event.targetTouches.length);
  console.log("Changed touches:", event.changedTouches.length);
  
  // Access individual touches
  for (let touch of event.touches) {
    console.log("Touch ID:", touch.identifier);
    console.log("Position:", touch.clientX, touch.clientY);
  }
});

// Pinch-to-zoom detection
let initialDistance = 0;
element.addEventListener("touchstart", (event) => {
  if (event.touches.length === 2) {
    const touch1 = event.touches[0];
    const touch2 = event.touches[1];
    initialDistance = Math.hypot(
      touch2.clientX - touch1.clientX,
      touch2.clientY - touch1.clientY
    );
  }
});

element.addEventListener("touchmove", (event) => {
  if (event.touches.length === 2) {
    const touch1 = event.touches[0];
    const touch2 = event.touches[1];
    const distance = Math.hypot(
      touch2.clientX - touch1.clientX,
      touch2.clientY - touch1.clientY
    );
    const scale = distance / initialDistance;
    console.log("Zoom scale:", scale);
  }
});

// Instead of attaching listener to each item
// ❌ Bad: Many listeners, doesn't work with dynamic content
document.querySelectorAll(".item").forEach((item) => {
  item.addEventListener("click", handleClick);
});

// ✅ Good: Single listener on parent
const list = document.querySelector("#list");
list.addEventListener("click", (event) => {
  // Check if clicked element matches selector
  if (event.target.matches(".item")) {
    console.log("Item clicked:", event.target);
    handleItem(event.target);
  }
  
  // Or use closest for nested elements
  const item = event.target.closest(".item");
  if (item && list.contains(item)) {
    console.log("Item found:", item);
  }
});

// Works automatically with dynamically added items
const newItem = document.createElement("div");
newItem.className = "item";
list.appendChild(newItem); // Click handler works immediately!

// Event flow: Capture → Target → Bubble
const parent = document.querySelector("#parent");
const child = document.querySelector("#child");

// Capture phase (top-down)
parent.addEventListener("click", (event) => {
  console.log("Parent - Capture phase");
  console.log("Phase:", event.eventPhase); // 1 (CAPTURING_PHASE)
}, { "capture": true });

// Target phase
child.addEventListener("click", (event) => {
  console.log("Child - Target phase");
  console.log("Phase:", event.eventPhase); // 2 (AT_TARGET)
  console.log("Target:", event.target); // child
  console.log("Current:", event.currentTarget); // child
});

// Bubble phase (bottom-up)
parent.addEventListener("click", (event) => {
  console.log("Parent - Bubble phase");
  console.log("Phase:", event.eventPhase); // 3 (BUBBLING_PHASE)
  console.log("Target:", event.target); // child (original)
  console.log("Current:", event.currentTarget); // parent
});

// Click child outputs:
// "Parent - Capture phase"
// "Child - Target phase"
// "Parent - Bubble phase"

// Multi-action delegation
document.querySelector("#toolbar").addEventListener("click", (event) => {
  const button = event.target.closest("button");
  if (!button) return;
  
  const action = button.dataset.action;
  switch(action) {
    case "save":
      handleSave();
      break;
    case "delete":
      handleDelete();
      break;
    case "edit":
      handleEdit();
      break;
  }
});

// Table row delegation
table.addEventListener("click", (event) => {
  const row = event.target.closest("tr");
  if (!row || row.parentElement.tagName === "THEAD") return;
  
  const cell = event.target.closest("td");
  const columnIndex = Array.from(row.cells).indexOf(cell);
  
  console.log("Row:", row.rowIndex);
  console.log("Column:", columnIndex);
  console.log("Data:", row.dataset.id);
});

// Form delegation
form.addEventListener("input", (event) => {
  const input = event.target;
  if (input.matches("[data-validate]")) {
    validateField(input);
  }
});

// Performance: Delegate to document for global handlers
document.addEventListener("click", (event) => {
  // Close dropdowns when clicking outside
  if (!event.target.closest(".dropdown")) {
    closeAllDropdowns();
  }
});