reveal.js

# Event Handling, Bubbling และ Capturing

Lesson 3 - JavaScript กับ DOM และ Event

---

## คำจำกัดความ

**Event** คือเหตุการณ์ที่เกิดขึ้นบนหน้าเว็บ เช่น click, input, submit, keydown ส่วน **Event Handling** คือการเขียนโค้ดเพื่อรับมือกับเหตุการณ์เหล่านั้น

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#458588", "primaryTextColor": "#fbf1c7", "primaryBorderColor": "#fabd2f", "lineColor": "#a89984", "secondaryColor": "#b8bb26", "tertiaryColor": "#d3869b", "background": "#282828", "mainBkg": "#3c3836", "textColor": "#ebdbb2"}}}%%
flowchart TD
  A["Root<br/>Document"] --> B["Parent<br/>Container"]
  B --> C["Child<br/>Button"]
  A -. "Capturing<br/>บนลงล่าง" .-> C
  C -. "Bubbling<br/>ล่างขึ้นบน" .-> A
</pre>

---

## `addEventListener`

```html
<button id="saveButton">บันทึก</button>

button.addEventListener("click", event => {
    // event.type คือชื่อ event
    console.log(event.type); // click
    console.log("บันทึกข้อมูลแล้ว");
  });
</script>
```

---

## Event Object

| Property/Method | ความหมาย |
|---|---|
| `event.target` | element ที่เป็นต้นเหตุจริง |
| `event.currentTarget` | element ที่ listener ผูกอยู่ |
| `event.type` | ชื่อ event |
| `preventDefault()` | ยับยั้งพฤติกรรม default |
| `stopPropagation()` | หยุดการ bubble/capture ต่อ |

---

## `preventDefault()`

```js
const form = document.querySelector("form");

form.addEventListener("submit", event => {
  // ป้องกัน browser reload หน้า
  event.preventDefault();
  console.log("ตรวจสอบฟอร์มด้วย JavaScript ก่อนส่ง");
});
```

---

## `stopPropagation()`

```js
const parent = document.querySelector(".parent");
const child = document.querySelector(".child");

parent.addEventListener("click", () => console.log("parent clicked"));

child.addEventListener("click", event => {
  // หยุดไม่ให้ event ไหลขึ้น parent
  event.stopPropagation();
  console.log("child clicked");
});
```

---

## Event Bubbling และ Capturing

- **Bubbling**: event ไหลจาก target ขึ้นไป parent
- **Capturing**: event ไหลจาก root ลงมาหา target

```js
document.addEventListener("click", () => {
  console.log("capturing phase");
}, true); // true = capturing
```

---

## Event Delegation

**Event Delegation** คือการผูก event ที่ parent เพียงจุดเดียว แล้วตรวจ `event.target` เพื่อจัดการ child

```html
<ul id="menu">
  <li data-page="home">หน้าแรก</li>
  <li data-page="course">รายวิชา</li>
  <li data-page="contact">ติดต่อ</li>
</ul>

menu.addEventListener("click", event => {
    // ตรวจว่าคลิก li จริงหรือไม่
    if (event.target.matches("li")) {
      console.log(`เปิดหน้า: ${event.target.dataset.page}`);
    }
  });
</script>
```

---

## สมการลดจำนวน Listener ด้วย Delegation

<math display="block">
  <mrow>
    <mi>saved</mi>
    <mo>=</mo>
    <mi>n</mi>
    <mo>-</mo>
    <mn>1</mn>
  </mrow>
</math>

โดยที่ **saved** คือจำนวน listener ที่ลดได้, **n** คือจำนวน child element, และ **1** คือ listener เดียวบน parent

---

## แบบทดสอบหลังเรียน

1. `event.target` และ `event.currentTarget` ต่างกันอย่างไร
2. `preventDefault()` เหมาะกับ event ใด
3. Bubbling คืออะไร
4. Capturing ใช้งานอย่างไรใน `addEventListener`
5. Event Delegation มีข้อดีอย่างไร

---

## End

<a href="/web-programming/05-dom-event/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>