Sự kiện chìm (Event Capturing) trong JavaScript

Ngoài sự nổi bọt của sự kiện còn có sự chìm (capturing). Thực tế, sự kiện đầu tiên đi từ trên xuống dưới (giai đoạn chặn bắt), đến phần tử của chúng ta (giai đoạn mục tiêu) và chỉ sau đó mới bắt đầu nổi bọt (giai đoạn nổi bọt).

Để gắn trình xử lý sự kiện có tính đến giai đoạn chặn bắt trong addEventListener có tham số thứ ba tùy chọn. Nếu nó bằng true - sự kiện sẽ kích hoạt ở giai đoạn chặn bắt, còn nếu false - ở giai đoạn nổi bọt (đây là mặc định). Hãy xem ví dụ:

elem1.addEventListener('click', function() {
	console.log('màu xanh lá - chặn bắt');
}, true);
elem1.addEventListener('click', function() {
	console.log('màu xanh lá - nổi bọt');
}, false);

elem2.addEventListener('click', function() {
	console.log('màu xanh lam - chặn bắt');
}, true);
elem2.addEventListener('click', function() {
	console.log('màu xanh lam - nổi bọt');
}, false);

elem3.addEventListener('click', function() {
	console.log('màu đỏ - chặn bắt');
}, true);
elem3.addEventListener('click', function() {
	console.log('màu đỏ - nổi bọt');
}, false);

Bạn có thể kiểm tra: