Bong bóng sự kiện trong JavaScript là gì?

Bong bóng sự kiện

Quá trình tạo bọt sự kiện bắt đầu với phần tử đã kích hoạt sự kiện và sau đó tạo bong bóng lên đến các phần tử có chứa trong hệ thống phân cấp.

Tóm tắt

Trong ví dụ sau, chúng ta có 3 phần tử div , span và nút .

Để duy trì hệ thống phân cấp, chúng tôi cần có nút đó phần tử được lồng vào bên trong span phần tử và span phần tử được lồng vào bên trong div yếu tố.
Chỉ định các sự kiện nhấp chuột cho tất cả các phần tử để khi một phần tử được nhấp vào, hộp cảnh báo sẽ mở ra hiển thị một thông báo tôn trọng như được minh họa trong ví dụ.
Sau khi thực hiện chương trình, hình ảnh hiển thị dưới đây sẽ được thực thi trên màn hình.
Khi một phần tử được nhấp vào thì tự động các phần tử bên ngoài của nó (chứa các phần tử) cũng được kích hoạt và thực thi.
Ví dụ:nếu chúng ta nhấp vào phần tử lồng nhau nhất bên trong (nút) thì cùng với hộp cảnh báo của nó, hộp cảnh báo của phần tử khác (span, div) cũng sẽ mở từng phần tử theo thứ bậc.
Giả sử, nếu chúng ta nhấp vào span sau đó đến hộp cảnh báo của span và phần tử chứa nó div sẽ mở từng cái một.
8) Quá trình kích hoạt phần tử này và sau đó sôi lên đến các phần tử có chứa trong hệ thống phân cấp được gọi là sự kiện sôi sục .
9) Các phần tử được kích hoạt và sôi nổi sẽ được thực thi.

Ví dụ

<html>
<head>
<style>
   .styleClass{
      display:table-cell;
      border:1px solid black;
      padding: 20px;
      text-align:center;
   }
</style>
</head>
<body>
   <div class = "styleClass" onclick = "alert('Div clicked')">Div element
   <span class = "styleClass" onclick ="alert('Span clicked')">span element
   <input type = "button" value = "click me" onclick="alert('Button clicked')">
</span>
</div>
</body>
</html>

Sau khi thực hiện chương trình trong trình chỉnh sửa mã, hình ảnh sau sẽ hiển thị

Bong bóng sự kiện trong JavaScript là gì? Khi nhấp vào nút 'nhấp vào tôi' (phần tử nút), kết quả sau sẽ hiển thị.

Đầu ra

Kết quả sau sẽ hiển thị khi nhấp vào nút "nhấp vào tôi" ở trên (phần tử nút)

Bong bóng sự kiện trong JavaScript là gì?

on clicking ok on above button alert box, we will get the following alert box with message span clicked. Bong bóng sự kiện trong JavaScript là gì? on clicking ok on above span alert box, we will get the following alert box with message div clicked.