DOM Manipulation

Event คืออะไร

Event คือเหตุการณ์ที่เกิดขึ้นในหน้าเว็บ เช่น ผู้ใช้คลิกปุ่ม พิมพ์ข้อความ เลื่อน scroll หรือโหลดหน้าเสร็จ JavaScript ไม่ได้รอดูทุก event ตลอดเวลา — เราต้อง "บอก" ว่าอยากรับ event ไหน บน element ไหน แล้วจะทำอะไร

วิธีที่ใช้บ่อยที่สุดคือ `addEventListener` ซึ่งผูกฟังก์ชัน (handler) เข้ากับ event ที่ต้องการฟัง

`addEventListener` — ผูกฟังก์ชันกับ event

syntax: `element.addEventListener(eventType, handler)` - `eventType` — ชื่อ event เช่น `"click"`, `"input"`, `"submit"` - `handler` — ฟังก์ชันที่จะทำงานเมื่อ event เกิดขึ้น

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

btn.addEventListener("click", function() {
  console.log("ปุ่มถูกคลิกแล้ว");
});

handler จะได้รับ **event object** เป็น argument แรกโดยอัตโนมัติ event object เก็บข้อมูลเกี่ยวกับ event นั้น ๆ เช่น element ที่ถูกคลิก ชนิดของ event และพิกัด mouse

Event object — ข้อมูลที่มาพร้อม event

เมื่อ handler ถูกเรียก มันจะได้รับ event object เสมอ เรามักตั้งชื่อพารามิเตอร์นั้นว่า `e` หรือ `event` properties ที่ใช้บ่อย: - `e.target` — element ที่ผู้ใช้โต้ตอบโดยตรง - `e.type` — ชนิดของ event เช่น `"click"` - `e.key` — ปุ่มที่กด (สำหรับ keyboard events)

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

btn.addEventListener("click", function(e) {
  console.log(e.target);  // <button id="btn">...</button>
  console.log(e.type);    // "click"
});

const input = document.querySelector("#search");

input.addEventListener("input", function(e) {
  console.log(e.target.value); // ข้อความที่พิมพ์ล่าสุด
});

ประเภท event ที่ใช้บ่อย

ข้อควรระวัง

• **Anonymous function ลบไม่ได้** — `removeEventListener` ต้องการ reference ของฟังก์ชันเดิม ถ้าผูกด้วย anonymous function `function() {}` จะลบออกไม่ได้ ต้องประกาศฟังก์ชันแยกไว้
• **ผูกซ้ำ = ทำงานสองรอบ** — การเรียก `addEventListener` สองครั้งด้วยฟังก์ชันคนละตัวจะผูก handler สองตัว ต่างจาก `onclick = fn` ที่เขียนทับได้
• **`this` ใน arrow function** — ถ้าใช้ arrow function เป็น handler `this` จะไม่ชี้ที่ element นั้น ให้ใช้ `e.target` แทน หรือใช้ regular function ถ้าต้องการ `this`

Lab 1: ผูก click listener บน button

Lab 2: ผูก input listener บน text input