Event Capturing (Bắt sự kiện) trong JavaScript

Event Capturing

Sự kiện lan truyền từ element cha ngoài cùng → target element. Ngược với Event Bubbling (target → cha).

Cơ chế

• 3 <div> lồng nhau: div1 > div2 > div3.
• Gán addEventListener("click", handler, true) cho mỗi div. Tham số 3 true bật capturing.
• Handler dùng this.getAttribute("id") lấy id element bị click.
• Click vào div3 (inner most): alert theo thứ tự div1 → div2 → div3.
• Click vào div2: alert div1 → div2.

Ví dụ hoàn chỉnh

<html> <head> <style> .divstyle{ display:table-cell; border: 2px solid black; padding: 20px; text-align: center; } </style> </head> <body> <div id="div1" class="divstyle"> div1 <div id="div2" class="divstyle"> div2 <div id="div3" class="divstyle"> div3 <script> var divs = document.getElementsByTagName("div"); for(var i = 0; i < divs.length; i++){ divs[i].addEventListener("click", clickhandler, true); } function clickhandler() { alert(this.getAttribute("id") + " event got handled"); } </script> </body> </html>

Kết quả: Click div3 → alert div1, div2, div3 lần lượt (capturing phase).