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 xét 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>
1. 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ý -
Inner div is clicked Outer div is clicked
2. Chụp 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); 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