Events & Forms

Events เป็นหัวใจของ interactivity — ทุก click, keypress, form submit ล้วนเป็น event

addEventListener

const btn = document.querySelector("#myBtn");

// เพิ่ม event listener
btn.addEventListener("click", (event) => {
  console.log("คลิกแล้ว!");
  console.log("Target:", event.target);
});

// ลบ event listener (ต้องใช้ named function)
function handleClick() {
  console.log("clicked");
}
btn.addEventListener("click", handleClick);
btn.removeEventListener("click", handleClick);

# Python (tkinter)
button = tk.Button(root, text="Click", command=handle_click)
# Python (web) ใช้ JS ฝั่ง frontend

// C (GTK)
g_signal_connect(button, "clicked", G_CALLBACK(on_click), NULL);

-- SQL ใช้ triggers แทน events
CREATE TRIGGER on_insert AFTER INSERT ON orders
FOR EACH ROW EXECUTE FUNCTION log_order();

Event Types ที่ใช้บ่อย

Event	เมื่อไหร่
`click`	คลิก element
`submit`	form ถูก submit
`input`	ค่าใน input เปลี่ยน (real-time)
`change`	ค่าเปลี่ยนและ blur
`keydown` / `keyup`	กดปุ่ม keyboard
`focus` / `blur`	element ได้/เสีย focus
`mouseover` / `mouseout`	mouse เข้า/ออก element

Event Object

document.addEventListener("keydown", (event) => {
  console.log(event.key);        // "Enter", "a", "Escape"
  console.log(event.code);       // "KeyA", "Enter"
  console.log(event.ctrlKey);    // true ถ้ากด Ctrl ด้วย
  console.log(event.shiftKey);   // true ถ้ากด Shift ด้วย
});

document.addEventListener("click", (event) => {
  console.log(event.target);     // element ที่ถูกคลิก
  console.log(event.clientX);    // ตำแหน่ง x
  console.log(event.clientY);    // ตำแหน่ง y
});

preventDefault

// ป้องกัน default behavior
const form = document.querySelector("form");

form.addEventListener("submit", (event) => {
  event.preventDefault(); // ไม่ reload หน้า
  console.log("Form submitted via JS");
});

// ป้องกัน link navigation
const link = document.querySelector("a");
link.addEventListener("click", (event) => {
  event.preventDefault();
  console.log("Link click handled by JS");
});

Form Validation

const form = document.querySelector("#signup-form");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const name = form.querySelector("#name").value.trim();
  const email = form.querySelector("#email").value.trim();
  const password = form.querySelector("#password").value;
  const errors = [];

  if (name.length < 2) {
    errors.push("ชื่อต้องมีอย่างน้อย 2 ตัวอักษร");
  }
  if (!email.includes("@")) {
    errors.push("Email ไม่ถูกต้อง");
  }
  if (password.length < 8) {
    errors.push("รหัสผ่านต้องมีอย่างน้อย 8 ตัวอักษร");
  }

  if (errors.length > 0) {
    alert(errors.join("\n"));
    return;
  }

  console.log("Valid!", { name, email, password });
});

Event Delegation

แทนที่จะผูก listener กับทุก element — ผูกที่ parent แล้วเช็ค target:

// ❌ ผูก listener ทุกปุ่ม (ไม่ดีถ้ามีเยอะ)
document.querySelectorAll(".delete-btn").forEach(btn => {
  btn.addEventListener("click", () => { /* ... */ });
});

// ✅ Event delegation — ผูกที่ parent เดียว
document.querySelector("#todo-list").addEventListener("click", (event) => {
  if (event.target.matches(".delete-btn")) {
    const todoItem = event.target.closest(".todo-item");
    todoItem.remove();
  }
});