×

Event Bubbling và Event Capturing Trong JavaScript

Avatar of luongtu
luongtu 0 Views

Event Bubbling

Event Bubbling (sự nổi sự kiện) là quá trình khi một sự kiện xảy ra trên một phần tử, và sự kiện này trước hết sẽ được xử lý bởi chính phần tử đó, sau đó sự kiện sẽ nổi lên (bubble up) từ phần tử con đến phần tử cha, và cứ tiếp tục như vậy cho đến khi đến phần tử gốc của DOM (thường là document).

Ví Dụ về Event Bubbling:

<!DOCTYPE html>
<html>
<head>
  <title>Event Bubbling Example</title>
</head>
<body>
  <div id="parent" style="padding: 50px; background-color: lightblue;">
    Parent
    <div id="child" style="padding: 50px; background-color: lightcoral;">
      Child
    </div>
  </div>
  <script>
    document.getElementById("parent").addEventListener("click", function() {
      alert("Parent clicked!");
    });

    document.getElementById("child").addEventListener("click", function() {
      alert("Child clicked!");
    });
  </script>
</body>
</html>

Trong ví dụ trên, khi bạn nhấp vào phần tử "Child", cả hai thông báo "Child clicked!" và "Parent clicked!" sẽ xuất hiện, bởi vì sự kiện "click" nổi lên từ phần tử con lên phần tử cha.

Event Capturing

Event Capturing (sự chụp sự kiện) là quá trình ngược lại với event bubbling. Khi một sự kiện xảy ra, sự kiện sẽ được xử lý từ phần tử gốc của DOM xuống đến phần tử đích trước khi được xử lý bởi phần tử đích đó.

Ví Dụ về Event Capturing:

<!DOCTYPE html>
<html>
<head>
  <title>Event Capturing Example</title>
</head>
<body>
  <div id="parent" style="padding: 50px; background-color: lightblue;">
    Parent
    <div id="child" style="padding: 50px; background-color: lightcoral;">
      Child
    </div>
  </div>
  <script>
    document.getElementById("parent").addEventListener("click", function() {
      alert("Parent clicked!");
    }, true); // true để kích hoạt event capturing

    document.getElementById("child").addEventListener("click", function() {
      alert("Child clicked!");
    }, true); // true để kích hoạt event capturing
  </script>
</body>
</html>

Trong ví dụ này, khi bạn nhấp vào phần tử "Child", thông báo "Parent clicked!" sẽ xuất hiện trước thông báo "Child clicked!", bởi vì sự kiện "click" được chụp từ phần tử cha xuống phần tử con.

Tổng Kết

  • Event Bubbling: Sự kiện nổi lên từ phần tử con lên phần tử cha.
  • Event Capturing: Sự kiện được chụp từ phần tử cha xuống phần tử con.
Đặc điểm Event Bubbling Event Capturing
Trình tự xử lý sự kiện Từ phần tử con đến phần tử cha Từ phần tử cha đến phần tử con
Kích hoạt bằng addEventListener Mặc định (false) Kích hoạt với true

Hiểu rõ event bubbling và event capturing sẽ giúp bạn kiểm soát và quản lý các sự kiện trong ứng dụng web một cách chính xác và hiệu quả hơn.

Comments

Bài viết liên quan