Sự kiện sôi sục và chụp sự kiện

Khám phá cách hoạt động của sự kiện và ghi lại sự kiện trong JavaScript

Bong bóng và bắt là 2 mô hình mà các sự kiện DOM sử dụng để tuyên truyền.

Giả sử cấu trúc DOM của bạn là

<div id="container">
  <button>Click me</button>
</div>

Bạn muốn theo dõi khi người dùng nhấp vàobuttonvà bạn có 2 người nghe sự kiện, một người đang bật nút và một người đang bật#container.

Hãy nhớ rằng, một cú nhấp chuột vào phần tử con sẽ luôn được truyền đến cha mẹ của nó, trừ khi bạn ngừng truyền (xem phần sau).

Những người nghe sự kiện đó sẽ được gọi theo thứ tự và thứ tự này được xác định bởi mô hình tạo bọt / bắt sự kiện được sử dụng.

Sủi bọtcó nghĩa là sự kiện truyền từ mục đã được nhấp (con) lên đến tất cả cây cha của nó, bắt đầu từ cây gần nhất.

Trong ví dụ của chúng tôi, trình xử lý trênbuttonsẽ bắn trước khi#containerngười xử lý.

Chụpthì ngược lại: trình xử lý sự kiện bên ngoài được kích hoạt trước trình xử lý cụ thể hơn, trình xử lý trênbutton.

Theo mặc định, tất cả bong bóng sự kiện.

Bạn có thể chọn áp dụng tính năng nắm bắt sự kiện bằng cách áp dụng đối số thứ ba choaddEventListener, đặt nó thànhtrue:

document.getElementById('container').addEventListener(
  'click',
  () => {
    //window loaded
  },
  true
)

Lưu ý rằngđầu tiên tất cả các trình xử lý sự kiện bắt được chạy.

Sau đó, tất cả các trình xử lý sự kiện sôi sục.

Thứ tự tuân theo nguyên tắc này: DOM đi qua tất cả các phần tử bắt đầu từ đối tượng Window và đi tìm mục đã được nhấp vào. Trong khi làm như vậy, nó gọi bất kỳ trình xử lý sự kiện nào được liên kết với sự kiện (giai đoạn bắt).

Khi nó đạt đến mục tiêu, nó sẽ lặp lại hành trình lên đến cây cha mẹ cho đến đối tượng Window, gọi lại các trình xử lý sự kiện (giai đoạn sôi sục)

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn js khác: