Trong JavaScript, event propagation (sự lan truyền sự kiện) xảy ra qua ba giai đoạn chính:
- Capturing Phase (Giai đoạn bắt đầu):
- Trong giai đoạn này, sự kiện di chuyển từ window xuống đến target (phần tử mục tiêu) nơi sự kiện được kích hoạt. Giai đoạn này được gọi là “capturing” hoặc “truyền từ trên xuống”.
- Các listener (bộ lắng nghe) sự kiện có thể được gán cho các phần tử ở giai đoạn này bằng cách sử dụng tham số thứ hai của
addEventListener với giá trị là true.
- Target Phase (Giai đoạn mục tiêu):
- Khi sự kiện đã đến phần tử mục tiêu, nó sẽ được xử lý tại đây. Đây là giai đoạn mà sự kiện thực sự được kích hoạt tại phần tử mà bạn đã chỉ định.
- Tại đây, các listener sự kiện đăng ký trên phần tử mục tiêu sẽ được gọi và thực thi.
- Bubbling Phase (Giai đoạn nổi):
- Sau khi sự kiện đã được xử lý tại phần tử mục tiêu, nó sẽ bắt đầu “nổi” ngược lại từ phần tử mục tiêu lên đến window. Giai đoạn này được gọi là “bubbling” hoặc “truyền từ dưới lên”.
- Trong giai đoạn này, các listener sự kiện đăng ký trên các phần tử cha sẽ được gọi theo thứ tự từ phần tử mục tiêu đến phần tử cha của nó.
Tóm tắt
- Capturing Phase: Từ window đến target.
- Target Phase: Tại target.
- Bubbling Phase: Từ target lên window.
Ví dụ
Dưới đây là một ví dụ đơn giản minh họa ba giai đoạn của event propagation:
// Gán sự kiện cho phần tử
document.getElementById("child").addEventListener("click", function() {
console.log("Child Clicked");
}, false); // false cho bubbling
document.getElementById("parent").addEventListener("click", function() {
console.log("Parent Clicked");
}, false); // false cho bubbling
document.getElementById("grandparent").addEventListener("click", function() {
console.log("Grandparent Clicked");
}, false); // false cho bubbling
Khi bạn click vào phần tử con, console sẽ hiển thị:
Child Clicked
Parent Clicked
Grandparent Clicked
Nếu bạn đổi false thành true trong addEventListener, bạn sẽ thấy kết quả khác trong giai đoạn capturing.
