⚡ JavaScript Lesson 08 — Events

1. addEventListener — Event တွေကို Listen

// Basic syntax
element.addEventListener(eventType, handlerFunction)

// Inline (old way — avoid)
<button onclick="doSomething()">Click</button>

// addEventListener (recommended)
const btn = document.getElementById("myBtn")
btn.addEventListener("click", function() {
  console.log("Clicked!")
})

// Arrow function version
btn.addEventListener("click", () => {
  console.log("Clicked!")
})

// Remove listener
btn.removeEventListener("click", handler)

2. Event Object — Event ရဲ့ Info

document.addEventListener("click", function(event) {
  console.log(event.type)        // "click"
  console.log(event.target)      // clicked element
  console.log(event.clientX)     // X position
  console.log(event.clientY)     // Y position
  event.preventDefault()         // default action ဖျက်
  event.stopPropagation()        // bubbling ရပ်
})

3. Common Events

4. Keyboard Events

document.addEventListener("keydown", function(e) {
  console.log(e.key)      // "Enter", "a", "ArrowUp", etc.
  console.log(e.code)     // "Enter", "KeyA", "ArrowUp"
  console.log(e.ctrlKey)  // Ctrl pressed?
  console.log(e.shiftKey) // Shift pressed?
  console.log(e.altKey)   // Alt pressed?

  if (e.key === "Enter") { /* Submit form */ }
  if (e.ctrlKey && e.key === "s") { /* Save */ }
})

5. Form Events

const form = document.getElementById("myForm")

form.addEventListener("submit", function(e) {
  e.preventDefault()   // Form ကို reload မဖြစ်အောင်
  const name = document.getElementById("name").value
  if (!name) {
    alert("Name is required!")
    return
  }
  console.log("Submitted:", name)
})

6. Event Delegation — Dynamic Elements

// Problem: dynamic elements ကို directly listen မရ
// Solution: Parent element ကို listen ပြီး e.target စစ်

const list = document.getElementById("list")

list.addEventListener("click", function(e) {
  if (e.target.classList.contains("item-btn")) {
    console.log("Clicked:", e.target.textContent)
    e.target.parentElement.remove()
  }
})

// Now even dynamically added items work!
const newItem = document.createElement("li")
newItem.innerHTML = `New Item <button class="item-btn">Delete</button>`
list.appendChild(newItem)