JS 29 – Bubbling và capturing trong JavaScript

0
147

Xin chào các bạn, trong bài học ngày hôm nay chúng ta sẽ cùng nhau tìm hiểu về Bubbling và capturing trong JavaScript.

Đầu tiên chúng ta sẽ xét một ví dụ:

Trình xử lý này được gán với thẻ <div>, nhưng nó cũng chạy nếu bạn nhấp vào bất kỳ thẻ nào nằm trong nó như <em> hoặc <code>

khi chúng ta nhấp chuột vào các đối tượng đó ta sẽ nhận được kết quả là:

Vậy thì tại sao trình xử lý trên <div> lại chạy ngay cả khi bạn nhấp chuột trên phần tử <em>? Chúng ta sẽ cùng nhau tìm hiểu nhé.

Bubbing

Quy tắc bubbing hay còn gọi là quytắc nổi bọt rất đơn giản:

Khi một sự kiện xảy ra trên một phần tử, đầu tiên nó chạy các trình xử lý trên nó, sau đó trên cha mẹ của nó, rồi các phần tử tổ tiên của nó.

Giả sử chúng ta có 3 phần tử lồng nhau FORM> DIV> P với trình xử lý trên mỗi phần tử:

Một cú nhấp chuột vào bên trong <p> đầu tiên sẽ chạy sự kiện onclick:

  1. Trên thẻ <p>.
  2. Sau đó chạy đến thẻ <div>.
  3. Cuối cùng là đến thẻ <form>.

Vì vậy, nếu chúng ta nhấp vào <p>, khi đó chúng ta sẽ thấy 3 alert: p → div → form.

Quá trình này được gọi là “nổi bọt”, bởi vì các sự kiện “nổi bọt” sẽ từ các yếu tố bên trong chạy qua cha mẹ như một bong bóng nổi trong nước.

event.target

Một trình xử lý trên phần tử cha mẹ luôn nhận được các chi tiết về nơi sự kiện thực sự xảy ra.

Phần tử lồng nhau sâu nhất gây ra sự kiện được gọi là phần tử đích, có thể truy cập dưới dạng event.target.

Lưu ý sự khác biệt này (= event.currentTarget):

  • event.target – là phần tử “target” đã khởi tạo sự kiện, nó không thay đổi thông qua quá trình bubbling.
  • this – là phần tử “hiện tại”, phần tử có trình xử lý hiện đang chạy trên đó.

Ví dụ: nếu chúng ta có một trình xử lý form.onclick, nó có thể “bắt” tất cả các sự kiện bên trong biểu mẫu. Cho dù sự kiện xảy ra ở đâu, nó sẽ “bubing” đến <form> và chạy trình xử lý.

Trong trình xử lý form.onclick:

  • this (= event.currentTarget) là phần tử <form>, bởi vì trình xử lý chạy trên nó.
  • event.target là phần tử cụ thể bên trong form thực sự được nhấp.

Dừng bubbing

Một sự kiện bubbling đi từ phần tử đích, thông thường nó sẽ đi lên cho đến khi gặp <html>. Nhưng bất kỳ trình xử lý nào cũng có thể quyết định rằng sự kiện này đã được xử lý hoàn toàn và ngừng bubbing.

Phương thức đó gọi là event.stopPropagation().

Ví dụ: body.onclick ở đây không hoạt động nếu bạn nhấp vào <button>:

Capturing

Còn có một giai đoạn xử lý sự kiện khác được gọi là “capturing”. Nó hiếm khi được sử dụng trong code thực, nhưng đôi khi có thể hữu ích.

Sự kiện DOM chuẩn mô tả 3 giai đoạn xảy ra sự kiện:

  • Giao đoạn capturing – sự kiện đi xuống phần tử.
  • Giai đoạn mục tiêu – sự kiện đã đạt đến yếu tố mục tiêu.
  • Giai đoạn bubbing – sự kiện bong bóng đi lên từ phần tử.

Trước đây chúng ta chỉ nói về “bubbing”, bởi vì giai đoạn capturing hiếm khi được sử dụng.

Trình xử lý được thêm sử dụng thuộc tính on<event> hoặc sử dụng thuộc tính HTML hoặc sử dụng addEventListener(event, handler) không làm việc với capturing, chúng chỉ chạy trên các giai đoạn 2 và 3.

Để bắt một sự kiện trong giai đoạn capturing, chúng ta cần đặt đối số thứ 3 của addEventListener thành true.

Có hai giá trị có thể cho đối số cuối cùng :

  • Nếu nó là false(mặc định), thì trình xử lý được đặt trên giai đoạn bubbing.
  • Nếu đó là true, thì trình xử lý được đặt ở giai đoạn capturing.

Kết luận

Như vậy trong bài học ngày hôm nay chúng ta đã cùng nhau tìm hiểu về Bubbling và capturing trong JavaScript. Trong bài học tiếp theo mình sẽ giới thiệu đến các bạn Sự kiện Keyup và keydown trong JavaScript.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây