16: Events Handling

ดักจับทุกการกระทำของผู้ใช้ (Click, Type, Submit) เพื่อสั่งงาน JavaScript

1. Event Listener (นักดักฟัง)

แทนที่จะเขียน onclick="..." ใน HTML (ซึ่งเก่าแล้ว) จะใช้คำสั่ง .addEventListener() ใน JS แทน เพราะยืดหยุ่นกว่าและเขียนซ้อนกันได้

Syntax

element.addEventListener("เหตุการณ์", ฟังก์ชันที่จะทำ)

JS 
let btn = document.querySelector("#myBtn");

// เมื่อมีการคลิก -> ให้รันฟังก์ชัน
btn.addEventListener("click", () => {
    alert("ปุ่มถูกกดแล้ว!");
    console.log("Button Clicked");
});

2. Events ที่พบบ่อย

เหตุการณ์ในหน้าเว็บมีเยอะมาก แต่ที่ใช้จริงบ่อย ๆ มีดังนี้:

Mouse Events
  • click: เมื่อคลิกเมาส์ซ้าย
  • dblclick: เมื่อดับเบิ้ลคลิก
  • mouseenter: เมื่อเอาเมาส์ชี้ (Hover)
  • mouseleave: เมื่อเอาเมาส์ออก
Keyboard & Form Events (คีย์บอร์ด/ฟอร์ม)
  • keydown: เมื่อกดปุ่มคีย์บอร์ดลง (กดค้างจะรัว)
  • keyup: เมื่อปล่อยปุ่มคีย์บอร์ด
  • submit: เมื่อกดส่งฟอร์ม สำคัญ
  • input: เมื่อพิมพ์ข้อความ (ทำงานทันทีทุกตัวอักษร)
  • change: เมื่อเปลี่ยนค่าเสร็จ (เช่น เลือก Dropdown, ติ๊ก Checkbox)
3. The Event Object (ตัวแปร e)

ทุกครั้งที่เกิดเหตุการณ์ Browser จะส่ง Object พิเศษ (มักตั้งชื่อว่า e หรือ event) มาให้ ซึ่งเก็บรายละเอียดของเหตุการณ์นั้นไว้

JS 
document.addEventListener("keydown", (e) => {
    console.log(e); // ดูข้อมูลทั้งหมด
    console.log("ปุ่มที่กด:", e.key); 
    console.log("รหัสปุ่ม:", e.code);
});
สมบัติสำคัญใน e:
  • e.target: คือ Element ตัวไหนที่เป็นต้นเหตุ
  • e.key: ปุ่มคีย์บอร์ดที่ถูกกด (เช่น "Enter", "a")
  • e.preventDefault(): สั่งห้ามการทำงานปกติ (ดูข้อถัดไป)

4. Form & Prevent Default

โดยปกติเมื่อกดปุ่ม Submit ในฟอร์ม หน้าเว็บจะ Refresh (โหลดใหม่) เสมอ ซึ่งทำให้ข้อมูลหายหมดและ JS หยุดทำงาน

ทางแก้: e.preventDefault()

ต้องใช้คำสั่งนี้บรรทัดแรก เพื่อ "ห้าม" ไม่ให้หน้าเว็บโหลดใหม่

JS 
let form = document.querySelector("#myForm");

form.addEventListener("submit", (e) => {
    e.preventDefault(); // 1. ห้ามรีเฟรชหน้าจอ
    
    // 2. ดึงค่าจาก Input
    let input = document.querySelector("#myInput");
    console.log("ข้อมูลที่กรอก:", input.value);
    
    // 3. เคลียร์ค่า
    input.value = ""; 
});

Workshop: To-Do List

รายการสิ่งที่ต้องทำ
  • ยังไม่มีรายการ...
Logic การทำงาน:
  1. เลือก form, input, ul มารอไว้
  2. ดักจับ Event submit ที่ฟอร์ม
  3. สั่ง e.preventDefault() กันหน้าเว็บรีเฟรช
  4. สร้าง HTML <li> ใหม่ ใส่ค่าจาก input
  5. ใช้ ul.innerHTML += ... เพื่อเพิ่มรายการต่อท้าย
Practice Mission: สมุดเยี่ยมชม
โจทย์:

จงสร้างระบบคอมเมนต์ง่ายๆ ที่มีช่องกรอก ชื่อ และ ข้อความ เมื่อกดส่ง ให้เก็บข้อมูลเป็น Object แล้วนำไปแสดงผลด้านล่าง (โดยไม่รีเฟรชหน้า)

Guestbook Form
รอข้อความจากคุณ...
สิ่งที่ต้องทำ:
  1. Event Listener: ดักจับ submit ของฟอร์ม และใช้ e.preventDefault()
  2. Object Creation: รับค่าจาก input ทั้งสอง แล้วสร้างเป็น Object เช่น { name: "Jo", msg: "Hello" }
  3. Validation: ถ้าชื่อหรือข้อความว่างเปล่า ให้ alert("กรุณากรอกข้อมูล") และไม่ทำต่อ
  4. DOM Render: สร้าง HTML String จาก Object นั้น แล้วยัดใส่ div#guestList (ใช้ Template Literal)
บทก่อนหน้า บทต่อไป