Tìm Hiểu PreventDefault, stopPropagation và stopImmediatePropagation trong Javascript

Trong Javascript, khi làm việc với các sự kiện (event), chúng ta thường hiểu sự kiện là một hành động tác động lên một đối tượng HTML. Chúng ta có thể “bắt” sự kiện này và thực hiện các hành động tương ứng. Bài viết này sẽ đi sâu vào ba phương thức chính thường được sử dụng để điều khiển luồng xử lý sự kiện: preventDefault(), stopPropagation(), và stopImmediatePropagation().

Ảnh minh họa các phương thức PreventDefault, stopPropagation, stopImmediatePropagation trong Javascript

Các Phương Thức Quản Lý Sự Kiện Cơ Bản

Trước khi đi vào chi tiết, hãy điểm qua một số phương thức liên quan đến sự kiện trong Javascript:

• Event.createEvent(): Tạo một sự kiện mới. Cần khởi tạo sự kiện này bằng cách gọi phương thức initEvent().
• Event.composedPath(): Trả về đường dẫn của sự kiện (các đối tượng mà trình lắng nghe (listener) sẽ được gọi).
• Event.initEvent(): Khởi tạo giá trị của một sự kiện đã tạo. Phương thức này không có tác dụng nếu sự kiện đã được gửi đi.
• Event.preventDefault(): Hủy sự kiện (nếu sự kiện đó có thể bị hủy).
• Event.stopImmediatePropagation(): Ngăn chặn tất cả các trình lắng nghe khác được gọi cho sự kiện này. Điều này bao gồm các trình nghe được gắn với cùng một phần tử và các trình nghe được gắn với các phần tử cha.
• Event.stopPropagation(): Ngừng truyền sự kiện trong DOM (Document Object Model).

Đi Sâu Vào PreventDefault()

Phương thức preventDefault() của đối tượng event được sử dụng để ngăn chặn hành vi mặc định của trình duyệt khi một sự kiện xảy ra. Điều này đặc biệt hữu ích khi bạn muốn tùy chỉnh cách một sự kiện được xử lý.

Ví dụ, xét đoạn mã sau:

<a href="https://www.example.com" id="myLink">Nhấn vào đây</a>

document.getElementById("myLink").addEventListener("click", function(event) {
  event.preventDefault();
  alert("Bạn vừa nhấn vào link nhưng trình duyệt sẽ không chuyển hướng.");
});

Trong ví dụ này, khi người dùng nhấp vào liên kết, trình duyệt sẽ hiển thị hộp thoại cảnh báo và không chuyển hướng người dùng đến trang https://www.example.com. preventDefault() đã ngăn chặn hành vi mặc định của liên kết (chuyển hướng).

Ảnh minh họa phương thức preventDefault trong Javascript

Khám Phá stopPropagation()

Phương thức stopPropagation() của đối tượng event được sử dụng để ngăn sự kiện lan tỏa (bubbling) lên các phần tử cha trong DOM. Điều này có nghĩa là, nếu một sự kiện xảy ra trên một phần tử con, các trình xử lý sự kiện trên các phần tử cha sẽ không được thực thi.

Ví dụ:

<a href="https://www.example.com" id="myLink">
  <p>Nhấn vào đây</p>
</a>

document.querySelector("p").addEventListener("click", function(event) {
  alert("Bạn đã nhấp vào phần tử p");
  event.stopPropagation();
});

document.querySelector("a").addEventListener("click", function(event) {
  alert("Bạn đã nhấp vào phần tử a");
});

Khi người dùng nhấp vào phần tử <p>, trình duyệt sẽ hiển thị hộp thoại cảnh báo “Bạn đã nhấp vào phần tử p”. stopPropagation() ngăn sự kiện lan lên phần tử <a>, do đó hộp thoại cảnh báo “Bạn đã nhấp vào phần tử a” sẽ không được hiển thị. Tuy nhiên, vì không sử dụng preventDefault(), trình duyệt vẫn sẽ chuyển hướng người dùng đến trang https://www.example.com.

stopImmediatePropagation(): “Dừng Ngay Lập Tức!”

stopImmediatePropagation() là một biến thể mạnh mẽ hơn của stopPropagation(). Không chỉ ngăn sự kiện lan tỏa lên các phần tử cha, nó còn ngăn bất kỳ trình xử lý sự kiện nào khác trên cùng một phần tử được thực thi.

Tóm lại:

• stopPropagation(): Ngăn sự kiện lan lên các phần tử cha.
• stopImmediatePropagation(): Ngăn sự kiện lan lên các phần tử cha và ngăn các trình xử lý khác trên cùng một phần tử được thực thi.

Ví dụ:

<p id="myParagraph">Ví dụ</p>

document.querySelector("p").addEventListener("click", function(event) {
  event.stopImmediatePropagation();
  alert("Trình xử lý sự kiện đầu tiên.");
});

document.querySelector("p").addEventListener("click", function(event) {
  alert("Trình xử lý sự kiện thứ hai.  Sẽ không bao giờ được gọi.");
});

Trong ví dụ này, khi người dùng nhấp vào phần tử <p>, chỉ hộp thoại cảnh báo “Trình xử lý sự kiện đầu tiên.” được hiển thị. stopImmediatePropagation() ngăn trình xử lý sự kiện thứ hai được thực thi.

Kết Luận

Hiểu rõ cách sử dụng preventDefault(), stopPropagation(), và stopImmediatePropagation() là rất quan trọng để kiểm soát luồng xử lý sự kiện trong Javascript. Nắm vững các phương thức này cho phép bạn tạo ra các ứng dụng web tương tác và phản hồi tốt hơn với hành động của người dùng.