Bubbling event (sự kiện nổi bọt) trong JavaScript là một trong hai loại cơ chế lan truyền sự kiện, cơ chế còn lại là capturing event. Khi một sự kiện xảy ra trên một phần tử trong DOM, sự kiện đó sẽ “bong bóng” lên từ phần tử đó đến các phần tử cha của nó trong chuỗi cây DOM.
Khi một sự kiện xảy ra, ví dụ như một cú nhấp chuột, sự kiện sẽ bắt đầu từ phần tử mà nó được kích hoạt (phần tử đích) và sau đó sẽ lan tỏa lên qua các phần tử cha của nó cho đến khi đến phần tử gốc (document). Ví dụ:
<div id="parent">
<button id="child">Click me!</button>
</div>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', () => {
console.log('Parent clicked!');
});
child.addEventListener('click', () => {
console.log('Child clicked!');
});
Ở đây, sự kiện click được kích hoạt trên nút (child) trước, sau đó nó “nổi bọt” lên và kích hoạt listener cho phần tử cha (parent).
Để ngăn chặn sự kiện nổi bọt, bạn có thể sử dụng phương thức stopPropagation() của đối tượng sự kiện. Khi gọi phương thức này trong một handler, nó sẽ ngăn sự kiện tiếp tục lan truyền lên các phần tử cha.
child.addEventListener('click', (event) => {
event.stopPropagation(); // Ngăn chặn sự kiện nổi bọt
console.log('Child clicked, but parent won’t be notified!');
});
Khi bạn nhấp vào nút, chỉ có thông báo “Child clicked, but parent won’t be notified!” sẽ được in ra, và listener cho phần tử cha sẽ không được gọi.
preventDefault()Ngoài stopPropagation(), bạn cũng có thể sử dụng preventDefault() để ngăn chặn hành vi mặc định của sự kiện. Tuy nhiên, preventDefault() không ngăn chặn sự kiện nổi bọt, mà chỉ ngăn chặn hành vi mặc định của sự kiện (ví dụ: ngăn chặn một liên kết chuyển trang khi được nhấp).
event.stopPropagation() trong handler của sự kiện.preventDefault() được sử dụng để ngăn chặn hành vi mặc định của sự kiện nhưng không ảnh hưởng đến việc bubbling.Bằng cách hiểu và kiểm soát bubbling event, bạn có thể xây dựng các ứng dụng web hiệu quả hơn và xử lý sự kiện theo cách mà bạn mong muốn.
