Giải thích quy trình luồng sự kiện trong Javascript

Trong JavaScript, quy trình Dòng sự kiện được hoàn thành bởi ba khái niệm -

• Mục tiêu sự kiện - Đối tượng DOM thực sự mà sự kiện đã xảy ra.

• Bong bóng sự kiện - Giải thích bên dưới

• Ghi hình sự kiện - Giải thích bên dưới

Sủi bọt sự kiện là thứ tự mà các trình xử lý sự kiện được gọi khi một phần tử được lồng vào bên trong phần tử thứ hai và cả hai phần tử đã đăng ký một bộ lắng nghe cho cùng một sự kiện (ví dụ:một lần nhấp). Với việc tạo bọt, sự kiện đầu tiên được phần tử trong cùng nắm bắt và xử lý, sau đó được truyền sang các phần tử bên ngoài.

Với tính năng thu thập, sự kiện đầu tiên được phần tử ngoài cùng nắm bắt và truyền đến các phần tử bên trong.

Hãy xem các ví dụ về cả hai.

Đối với cả hai ví dụ sau, hãy tạo HTML sau -

Ví dụ

<div id='outer' style='background-color:red;display:inline-block;padding:50px;'>
   Outer Div
   <div id='inner' style='background-color:yellow;display:inline-block;padding:50px;'>
      Inner Div
   </div>
</div>

Bong bóng sự kiện

document.querySelector('#outer').addEventListener('click', e => {
   console.log('Outer div is clicked');
}, false);
document.querySelector('#inner').addEventListener('click', e => {
   console.log('Inner div is clicked');
}, false);

Nếu bạn chạy mã trên và nhấp vào div bên trong, bạn sẽ nhận được nhật ký -

Div bên trong được nhấp vào

Div bên ngoài được nhấp vào

Ghi lại sự kiện

document.querySelector('#outer').addEventListener('click', e => {
   console.log('Outer div is clicked');
}, true);
document.querySelector('#inner').addEventListener('click', e => {
   console.log('Inner div is clicked');
}, true);

Đầu ra

Nếu bạn chạy mã trên và nhấp vào div bên trong, bạn sẽ nhận được nhật ký -

Outer div is clicked
Inner div is clicked