Giải thích về bubbling event trong Javascript và làm sao để ngăn chặn nó?

Bubbling event là một khái niệm trong quá trình lan truyền sự kiện (event propagation) trong DOM của JavaScript. Khi một sự kiện xảy ra trên một phần tử, nó không chỉ được xử lý tại phần tử đó mà còn được "bong bóng" lên qua các phần tử cha của nó trong cấu trúc DOM, từ phần tử mục tiêu (target element) cho đến đối tượng cửa sổ toàn cầu (global window object)

Cách Thức Hoạt Động của Bubbling Event

Khi một sự kiện được kích hoạt, sau khi được xử lý tại phần tử mục tiêu, nó sẽ bắt đầu "bong bóng" lên qua các phần tử cha. Sự kiện sẽ đi qua tất cả các phần tử cha theo thứ tự lồng nhau của chúng trong giai đoạn "bubbling". Trong quá trình này, bất kỳ trình xử lý sự kiện (event handler) nào được đăng ký trên các phần tử cha cũng sẽ được thực thi

Ngăn Chặn Bubbling Event

Để ngăn chặn sự kiện tiếp tục "bong bóng" lên các phần tử cha, bạn có thể sử dụng phương thức stopPropagation() trên đối tượng sự kiện. Phương thức này ngăn chặn sự lan truyền của sự kiện hiện tại trong các giai đoạn capturing và bubbling. Tuy nhiên, nó không ngăn chặn các hành vi mặc định từ việc xảy ra; ví dụ, các click trên liên kết vẫn được xử lý. Nếu bạn muốn ngăn chặn cả hành vi mặc định, bạn cần sử dụng phương thức preventDefault()

Ví dụ

Dưới đây là một ví dụ về cách ngăn chặn bubbling event:

<!DOCTYPE htm...