Sự nổi bọt của sự kiện trong JavaScript

Hãy tưởng tượng bạn có nhiều khối lồng vào nhau:

<div id="elem1">
	<div id="elem2">
		<div id="elem3"></div>
	</div>
</div>

Lấy tham chiếu đến các div của chúng ta vào các biến:

let elem1 = document.querySelector('#elem1');
let elem2 = document.querySelector('#elem2');
let elem3 = document.querySelector('#elem3');

Và bây giờ gắn các trình xử lý sự kiện nhấp chuột vào chúng:

elem1.addEventListener('click', function() {
	alert('xanh lá cây');
});
elem2.addEventListener('click', function() {
	alert('xanh lam');
});
elem3.addEventListener('click', function() {
	alert('đỏ');
});

Hiển thị các khối của chúng ta trên màn hình, thêm một chút CSS:

Bây giờ hãy nhấp vào khối màu đỏ trong cùng nhất - và bạn sẽ thấy sự kiện đầu tiên kích hoạt trên khối đỏ, sau đó trên khối xanh lam, rồi trên khối xanh lá cây. Điều này hợp lý, bởi vì khi bạn nhấp vào khối bên trong, bạn đồng thời cũng đang nhấp vào tất cả các khối bên ngoài.

Vậy là, khi bạn nhấp vào khối trong cùng nhất, sự kiện nhấp chuột phát sinh đầu tiên trong nó, sau đó kích hoạt trên phần tử cha của nó, trên phần tử cha của cha nó và cứ thế, cho đến khi lên tới đỉnh.

Hành vi này được gọi là sự nổi bọt (bubbling) của sự kiện - tương tự như một bong bóng khí nổi lên từ đáy. Giống như bong bóng, sự kiện của chúng ta như thể nổi lên trên, mỗi lần kích hoạt trên các khối ở cấp cao hơn.

Tự viết mã để minh họa sự nổi bọt của sự kiện. Kiểm tra sự nổi bọt của các loại sự kiện khác nhau trên đó.

Không phải tất cả sự kiện đều có thể nổi bọt. Hãy thử nghiệm tìm ít nhất một sự kiện sẽ không nổi bọt.