Bubbling JavaScript là gì?

Bubbling trong Javascript là gì?

Để tìm hiểu về khái niệm Bubbling chúng ta sẽ cùng xem một ví dụ nhé!

Mình sẽ tạo ra 3 div level tương ứng level 1 sẽ chứa level 2, level 2 chứa level 3. Sau đó thêm sự kiện onclick cho các div level này.

<div class="container" onclick="alert('level 1')">
  <b>level 1</b>
  <div onclick="alert('level 2')">
    <b>level 2</b>
    <p onclick="alert('level 3')">
      <b>level 3</b>
    </p>
  </div>
</div>

Bây giờ khi chúng ta thử click vào level 3. Sẽ có alert hiện ra theo thứ tự sau: level 3 -> level 2 -> level 1 😬. Tại sao khi ta click vào level 3 lại hiện ra 3 alert như mình đã nói? Để giải thích đây được gọi là quá trình Bubbling trong Javascript 😄.

Các bạn thử thao tác ở codesanbox nhé.

Mình đã gắn sự kiện click cho mỗi level và giả sử chúng ta click vô level 3 thì điều gì sẽ xảy ra?

• 1. Chạy alert ở level 3
• 2. Sau đó chạy tiếp alert ở level 2
• 3. chạy alert ở level 1
• 4. Tiếp tục cho đến khi gặp document object thì dừng.

Như mình đã nói quá trình trên gọi là Bubbling. Nguyên tắc của Bubbling cũng rất đơn giản: Khi một sự kiện (event) xảy ra trên một phần tử, đầu tiên nó chạy các function mà bạn gán trên phần tử đó, sau đó lần lượt chạy trên parent của phần tử đó, và tiếp tục chạy trên các phần tử chứa parent. Hiểu đơn giản thì nó sẽ chạy từ phần tử bạn đã click và chạy lần lượt ra các phần tử bao bọc phần tử đã click.

Quá trình này giống với quá trình sủi bọt nên trong Javascript nó được gọi là “bubbling”. Các sự kiện của inner element chạy trước sau đó chạy dần lên các parents.

Có một số sự kiện như: focus, blur,... sẽ không có bubble

Để kiểm tra một sự kiện có bubble hay không các bạn có thể dùng event.bubbles.

Kết luận

Như vậy là chúng ta đã tìm hiểu về Bubbling trong Javascript. Hy vọng bài viết sẽ giúp ích cho các bạn.

Hẹn gặp các bạn trong các bài viết sắp tới nhé 👏🤞😄.