Event Capturing ใน JavaScript: การไหลของ Event จากนอกเข้าด้านใน

Event Capturing (Capture Phase)

Event Flow 3 Phases: Capture → Target → Bubble

• Capture Phase: Event ไหลจาก Root (Window) ลงมายัง Target Element
• Target Phase: Event ถึง Element ที่ Trigger
• Bubble Phase: Event ขึ้นจาก Target กลับไป Root

addEventListener Phase Parameter

element.addEventListener(event, handler, useCapture);
// useCapture = true  → Capture Phase
// useCapture = false → Bubble Phase (Default)
// หรือใช้ Object: {capture: true}

ตัวอย่าง: Nested Divs ด้วย Capture

<style>
  .divstyle { display: table-cell; border: 2px solid black; padding: 20px; text-align: center; }
</style>
<body>
  <div id="div1" class="divstyle"> div1
    <div id="div2" class="divstyle"> div2
      <div id="div3" class="divstyle"> div3 </div>
    </div>
  </div>

  <script>
    const divs = document.getElementsByTagName('div');
    for (let div of divs) {
      div.addEventListener('click', clickHandler, true); // Capture!
    }
    
    function clickHandler() {
      alert(this.getAttribute('id') + ' event captured');
    }
  </script>
</body>

พฤติกรรม: คลิก div3 (Innermost)

1. Alert: div1 event captured
2. Alert: div2 event captured
3. Alert: div3 event captured

ลำดับ: นอก → ใน (Capture Phase)

Capture vs Bubble

event.stopPropagation()

หยุด Event Flow ทั้ง Capture และ Bubble