×

Sự Khác Biệt Giữa event.preventDefault() và event.stopPropagation() Trong JavaScript

Avatar of luongtu
luongtu 2 Views

Khi làm việc với các sự kiện trong JavaScript, bạn sẽ thường xuyên gặp phải hai phương thức: event.preventDefault() và event.stopPropagation(). Cả hai đều có vai trò quan trọng trong việc kiểm soát hành vi và luồng của các sự kiện. Dưới đây là giải thích chi tiết về từng phương thức và sự khác biệt giữa chúng.

event.preventDefault()

Phương thức event.preventDefault() được sử dụng để ngăn chặn hành vi mặc định của sự kiện. Ví dụ, nếu một sự kiện click xảy ra trên một liên kết (<a>), hành vi mặc định là điều hướng đến URL được chỉ định. Sử dụng event.preventDefault() sẽ ngăn chặn điều này.

Cú pháp:

event.preventDefault();

Ví dụ:

<!DOCTYPE html>
<html>
<head>
  <title>preventDefault Example</title>
</head>
<body>
  <a href="https://www.example.com" id="myLink">Go to Example.com</a>
  <script>
    var link = document.getElementById("myLink");
    link.addEventListener("click", function(event) {
      event.preventDefault();
      alert("Link click prevented!");
    });
  </script>
</body>
</html>

Trong ví dụ trên, khi người dùng nhấp vào liên kết, thay vì điều hướng đến trang web, một thông báo sẽ hiển thị và điều hướng sẽ bị ngăn chặn.

event.stopPropagation()

Phương thức event.stopPropagation() được sử dụng để ngăn chặn sự kiện nổi lên (bubbling) hoặc chụp xuống (capturing) trong DOM. Điều này có nghĩa là sự kiện sẽ không được truyền lên các phần tử cha hoặc xuống các phần tử con.

Cú pháp:

event.stopPropagation();

Ví dụ:

<!DOCTYPE html>
<html>
<head>
  <title>stopPropagation 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>
    var parent = document.getElementById("parent");
    var child = document.getElementById("child");

    parent.addEventListener("click", function() {
      alert("Parent clicked!");
    });

    child.addEventListener("click", function(event) {
      event.stopPropagation();
      alert("Child clicked, propagation stopped!");
    });
  </script>
</body>
</html>

Trong ví dụ này, khi người dùng nhấp vào phần tử "Child", chỉ có thông báo "Child clicked, propagation stopped!" hiển thị và sự kiện sẽ không nổi lên phần tử "Parent".

Tổng Kết

  • event.preventDefault():

    • Ngăn chặn hành vi mặc định của sự kiện.
    • Thường được sử dụng trong các sự kiện như nhấp chuột vào liên kết, gửi biểu mẫu, v.v.
    • Không ảnh hưởng đến sự nổi lên hoặc chụp xuống của sự kiện trong DOM.

  • event.stopPropagation():

    • Ngăn chặn sự kiện nổi lên (bubbling) hoặc chụp xuống (capturing) trong DOM.
    • Thường được sử dụng để kiểm soát luồng của sự kiện và ngăn chặn sự kiện ảnh hưởng đến các phần tử cha hoặc con.
    • Không ảnh hưởng đến hành vi mặc định của sự kiện.
Phương Thức Chức Năng Ví Dụng Cụ Thể
event.preventDefault() Ngăn chặn hành vi mặc định của sự kiện (như điều hướng liên kết, gửi biểu mẫu, v.v.). Nhấp vào liên kết và ngăn điều hướng.
event.stopPropagation() Ngăn chặn sự kiện nổi lên (bubbling) hoặc chụp xuống (capturing) trong DOM. Ngăn chặn sự kiện click nổi lên phần tử cha.

Hiểu và sử dụng đúng hai phương thức này sẽ giúp bạn kiểm soát hành vi và luồng sự kiện trong ứng dụng web của mình một cách chính xác và hiệu quả.

Comments

Bài viết liên quan