JavaScript DOM Events คืออะไร

นิยาม

DOM Events คือเหตุการณ์ที่เกิดขึ้นบนหน้าเว็บ ซึ่ง JavaScript สามารถจับ (listen) และตอบสนอง (handle) ได้ Events เป็นส่วนหนึ่งของ DOM Level 3 ทุก HTML Element มีชุด Events ของตัวเอง

ตัวอย่างพื้นฐาน: เปลี่ยนข้อความเมื่อคลิก

<!DOCTYPE html>
<html>
<body>
  <p onclick="myEvent(this)">Click me</p>
  <script>
    function myEvent(id) {
      id.innerHTML = "Welcome!";
    }
  </script>
</body>
</html>

ประเภท Events หลัก

1. Mouse Events

2. Keyboard Events

3. Form Events

4. Window/Document Events

• load - โหลดหน้าเว็บเสร็จ (รวมรูปภาพ, สไตล์)
• DOMContentLoaded - โหลด HTML เสร็จ (ไม่รอรูปภาพ) แนะนำกว่า load
• resize - ปรับขนาดหน้าต่าง
• scroll - เลื่อนหน้าเว็บ
• beforeunload - ก่อนออกจากหน้าเว็บ

ตัวอย่าง: onmouseover และ onmouseout

<html>
<head>
  <script>
    function over() {
      document.write("Mouse Over");
    }
    function out() {
      document.write("Mouse Out");
    }
  </script>
</head>
<body>
  <p>Bring your mouse inside the division to see the result:</p>
  <div onmouseover="over()" onmouseout="out()">
    <h2> This is inside the division </h2>
  </div>
</body>
</html>

Event Object

ทุก Event Handler จะรับ Event Object เป็นพารามิเตอร์แรก มี Properties/Methods สำคัญ:

• event.target - องค์ประกอบที่ Trigger Event
• event.currentTarget - องค์ประกอบที่ผูก Listener
• event.preventDefault() - ยกเลิกพฤติกรรมเริ่มต้น
• event.stopPropagation() - หยุด Event Bubbling
• event.type - ชื่อ Event (เช่น "click")

Event Bubbling และ Capturing

• Capturing Phase: Event ไปจาก Window -> ... -> Target
• Target Phase: Event ที่ Target Element
• Bubbling Phase: Event ขึ้นจาก Target -> ... -> Window (Default)

ใช้ addEventListener(type, handler, true) เพื่อจับใน Capturing Phase