HomeLập trìnhJavaScriptBong bóng sự...

Bong bóng sự kiện trong JavaScript – Cách lan truyền sự kiện hoạt động với các ví dụ


Các phần tử HTML nhận các loại sự kiện khác nhau, từ nhấp chuột, làm mờ, cuộn, v.v.

Một hành vi mà những sự kiện này có điểm chung là Bong bóng sự kiện. Tôi sẽ giải thích ý nghĩa của hành vi này trong bài viết này.

Tôi cũng đã tạo một phiên bản video của bài viết này mà bạn có thể xem tại đây.

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

Bong bóng sự kiện là một khái niệm trong DOM (Mô hình đối tượng tài liệu). Nó xảy ra khi một phần tử nhận được một sự kiện và sự kiện đó nổi lên (hoặc bạn có thể nói là được truyền hoặc lan truyền) đến các phần tử cha và tổ tiên của nó trong cây DOM cho đến khi nó đến được phần tử gốc.

Đây là hành vi mặc định của các sự kiện trên các phần tử trừ khi bạn dừng quá trình lan truyền mà tôi sẽ giải thích ở cuối bài viết này

Hãy xem một ví dụ để tôi có thể giải thích rõ hơn cách thức hoạt động của sự kiện sủi bọt.

HTML:

<body>
  <div>
    <span>
      <button>Click Me!</button>
    </span>
  </div>
</body>

CSS:

body {
  padding: 20px;
  background-color: pink;
}

div {
  padding: 20px;
  background-color: green;
  width: max-content;
}

span {
  display: block;
  padding: 20px;
  background-color: blue;
}

Kết quả:

hình ảnh-256

Các cái nút là con của nhịpđến lượt nó là con của divvà div là con của thân thể. Cây DOM sẽ trông như thế này:

hình ảnh-263
Cây DOM cho tương tác này

Khi bạn bấm vào cái nútbạn có thể nghĩ về nó giống như bạn cũng đang nhấp vào nhịp (nền xanh). Điều này là do nút là con của khoảng.

Đó cũng là điều tương tự với divthân thể. Khi bạn nhấp vào nút, giống như bạn cũng đang nhấp vào span, div và body vì chúng là tổ tiên của nút. Đây là ý tưởng về bong bóng sự kiện.

Đọc thêm  Hướng dẫn nhanh chóng và đơn giản về Biểu thức chính quy JavaScript

Một sự kiện không dừng lại ở phần tử trực tiếp nhận nó. Sự kiện nổi lên từ tổ tiên của nó, cho đến khi nó đến phần tử gốc.

Vì vậy, nếu nút nhận được một nhấp chuột sự kiện, ví dụ, sự kiện span, divbody (lên cho đến khi htmlphần tử gốc) tương ứng nhận sự kiện đó:

hình ảnh-264
Hình minh họa cho thấy cách thức hoạt động của bong bóng sự kiện

Ngoài ra, nếu bạn nhấp vào hộp màu xanh lam (span), thì nút đó sẽ không nhận được sự kiện nhấp chuột vì nút đó không phải là cha hoặc tổ tiên hoặc span. Tuy nhiên, div, nội dung và HTML sẽ nhận được sự kiện.

Điều tương tự cũng xảy ra nếu bạn nhấp vào div – sự kiện được truyền đến phần tử nội dung và html.

Cách xử lý các sự kiện có bong bóng

Hành vi “Bubble sự kiện” giúp bạn có thể xử lý một sự kiện trong phần tử cha thay vì phần tử thực tế đã nhận sự kiện.

Mẫu xử lý sự kiện trên phần tử tổ tiên được gọi là Ủy quyền sự kiện. Bạn có thể đọc thêm về nó ở đây.

Hãy tạo một số trình xử lý và xử lý sự kiện:

const body = document.getElementsByTagName("body")[0]
const div = document.getElementsByTagName("div")[0]
const span = document.getElementsByTagName("span")[0]
const button = document.getElementsByTagName("button")[0]

body.addEventListener('click', () => {
  console.log("body was clicked")
})

div.addEventListener('click', () => {
  console.log("div was clicked")
})

span.addEventListener('click', () => {
  console.log("span was clicked")
})

button.addEventListener('click', () => {
  console.log("button was clicked")
})

Ở đây, chúng tôi đã chọn body, div, spanbutton các phần tử từ DOM. Sau đó, chúng tôi đã thêm click trình xử lý sự kiện cho từng người trong số họ và chức năng xử lý ghi lại lần lượt “cơ thể đã được nhấp”, “div đã được nhấp”, “span đã được nhấp” và “nút đã được nhấp”.

Điều gì xảy ra trên bảng điều khiển khi bạn nhấp vào nền màu hồng (chính là phần thân) là:

body was clicked

Khi bạn nhấp vào nền xanh lục (là div), bảng điều khiển hiển thị:

div was clicked
body was clicked

Sự kiện “nhấp chuột” trên phần tử nội dung được kích hoạt mặc dù phần tử div là phần tử đích được nhấp vì sự kiện “nhấp chuột” tạo bọt từ div sang phần thân.

Đọc thêm  Cách học JavaScript nhanh hơn một chút

Khi bạn nhấp vào nền màu xanh lam (là nhịp), bảng điều khiển hiển thị:

span was clicked
div was clicked
body was clicked

Và cuối cùng, khi bạn nhấp vào nút, bảng điều khiển sẽ hiển thị:

button was clicked
span was clicked
div was clicked
body was clicked

Làm thế nào để dừng bong bóng sự kiện

Bong bóng sự kiện là một hành vi mặc định cho các sự kiện. Nhưng trong một số trường hợp, bạn có thể muốn ngăn chặn điều này.

Ví dụ, giả sử từ mã HTML của chúng tôi, rằng bạn muốn div mở một phương thức khi nó được nhấp vào. Mặt khác, đối với nút, bạn muốn nó thực hiện một yêu cầu API khi được nhấp vào.

Trong trường hợp này, bạn có thể không muốn phương thức mở khi bạn nhấp vào nút. Bạn có thể muốn phương thức chỉ mở khi bạn thực sự nhấp vào nó (chứ không phải khi bạn nhấp vào bất kỳ phần tử con nào của nó). Đây là nơi ngăn chặn sự lan truyền sự kiện.

Để ngăn sự kiện bong bóng, bạn sử dụng stopPropagation phương thức của đối tượng sự kiện.

Khi xử lý các sự kiện, một event đối tượng được chuyển đến chức năng xử lý:

button.addEventListener("click", (event) => {
  // do anything with the event object
}

Các event đối tượng chứa các thuộc tính có thông tin về sự kiện đã được kích hoạt và phần tử được kích hoạt trên đó. Đối tượng này cũng chứa các phương thức – một trong số đó là stopPropagation().

Các stopPropagation phương thức của một sự kiện ngăn không cho sự kiện lan truyền đến cha mẹ và tổ tiên của phần tử mà sự kiện được kích hoạt trên đó.

Đọc thêm  JavaScript replaceAll() – Thay thế tất cả các trường hợp của một chuỗi trong JS

Chúng ta có thể sử dụng điều này trong mã JavaScript ở trên:

body.addEventListener('click', () => {
  console.log("body was clicked")
})

div.addEventListener('click', () => {
  console.log("div was clicked")
})

span.addEventListener('click', () => {
  console.log("span was clicked")
})

button.addEventListener('click', (event) => {
  event.stopPropagation()
  console.log("button was clicked")
})

Với điều này, khi bạn nhấp vào nút, tất cả những gì bạn nhận được trong bảng điều khiển là:

button was clicked

Cha mẹ và tổ tiên của nút không nhận được sự kiện nhấp chuột vì nó không nổi lên từ nút.

Bạn cũng có thể dừng hiện tượng sủi bọt từ một phần tử khác như sau:

body.addEventListener('click', () => {
  console.log("body was clicked")
})

div.addEventListener('click', () => {
  console.log("div was clicked")
})

span.addEventListener('click', (event) => {
  event.stopPropagation()
  console.log("span was clicked")
})

button.addEventListener('click', () => {
  console.log("button was clicked")
})

với stopPropagation() được gọi trên trình xử lý sự kiện của nhịp và nhấp vào nút, trên bảng điều khiển, bạn nhận được:

button was clicked
span was clicked

Sự kiện bong bóng từ nút đến nhịp nhưng dừng ở đó vì quá trình lan truyền bị dừng tại thời điểm này.

kết thúc

Khi các phần tử nhận được các sự kiện, các sự kiện đó sẽ lan truyền đến cha mẹ và tổ tiên của chúng trong cây DOM. Đây là khái niệm về sự kiện bong bóngvà nó cho phép các phần tử cha xử lý các sự kiện xảy ra trên các phần tử con của chúng.

Các đối tượng sự kiện cũng có stopPropagation phương pháp mà bạn có thể sử dụng để ngăn chặn sự sủi bọt của một sự kiện. Điều này hữu ích trong trường hợp bạn muốn một phần tử chỉ nhận sự kiện nhấp khi nó được nhấp chứ không phải khi bất kỳ phần tử con nào của nó được nhấp.

stopPropagationpreventDefault là các phương thức của đối tượng sự kiện để dừng các hành vi mặc định. Đây là một bài viết về sự khác biệt giữa các phương pháp này.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status