Video học lập trình mỗi ngày

Event delegation, bubbling, và capturing là gì? Sự khác biệt của 3 sự kiện này trong javascript. Nếu trả lời được thì bỏ qua câu 3 và 7.

Xem thêm: Series - Mẹo viết javascript

Đây là trong nhiều câu hỏi mà tôi nhận được trong tập tài liệu để phỏng vấn. Nhìn vào có 10 câu, chủ yếu là tuyển fresher nhưng khi tôi đọc đến câu 2 thì suy nghĩ một chút. Tôi nhớ là đã biết hay không biết mông lung quá nên ghi lại bài này dành cho tôi. Bạn không cần đọc.

Event Delegation là gì

Thực tế uỷ quyền là phó thác cho ai đó sử dụng cái của mình để đi giao dịch hay đàm phán gì đó. Giống như trong gia đình có 5 anh em, bố mẹ chia cho 5 miếng đất trong vườn. 5 anh em thống nhất uỷ quyền cho Anh hai ( ở bắc và trung gọi là Anh cả ) đi làm sổ riêng thông qua sổ lớn của ba mẹ. Gọi là uỷ quyền. vậy hiểu trong kỹ thuật là:

Event Delegation là một kỹ thuật được sử dụng để lắng nghe các sự kiện con. Có nghĩa là bạn uỷ quyền cho phần tử mẹ có thể lắng nghe các sự kiện bên trong nó.

Ví dụ: Trong div element-parent có nhiều input bây giờ muốn lắng nghe toàn bộ, đứa con nào mà hu hí là biết liền, code như vậy:

var form = document.querySelector('#element-parent');

// Lắng nghe tất cả các sự kiện input có trong #element-parent
form.addEventListener('input', function (event) {

    // Log những gì thay đổi, của ai, làm gì???
    console.log(event.target);

}, false);

Event Bubbling là gì

Bubbling (sủi bọt) tôi biết khá rõ, vì nó liên quan đến rò rỉ bộ nhớ. Nhưng ở đây hiểu đơn giản như thế này. Ai uống bia thì biết cách hoạt động của Event Bubbling này. Quan sát ly bia, khi nó sủi bọt thì bọt từ ở dưới sủi lên, cho đến khi tràn cốc bia mà thôi. Nghĩa là một sự kiện được kích hoạt, thì cha mẹ, ông bà tổ tiên nó được kích hoạt luôn. Tương tự, div > body > html > document > window.

Ví dụ: Có 3 phần tử bên dưới.

<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

Event Capturing là gì?

Tôi thấy đây rất giống với Event Bubbling. Chỉ khác là tham số false và true là tham số cuối cùng. Nhưng theo tôi tìm hiểu thì khi bạn sử dụng Bubbling thì có những event bạn không thể lắng nghe được, ví dụ như event focus của input. Ví dụ:

document.addEventListener('focus', function (event) {
    console.log(event.target);
}, false);

Event này không bao giờ chạy khi sử dụng Event Bubbling. Chính vì vậy mới nhờ đến event Capturing, đối số cuối cùng của addEventListener() chính là useCapture. Chỉ cần chỉnh sửa lại đối số cuối cùng là có thể ok

document.addEventListener('focus', function (event) {
    console.log(event.target);
}, true);

Đối với các sự kiện sủi bọt, hãy đặt nó thành true để ghi lại sự kiện.

Tóm lại

Không có gì mà tóm, tôi chỉ ghi lại cho tôi hiểu hơn để đi chém gió.. pp