Sự kiện beforeunload trong JavaScript (trước khi chuyển trang) | Laptrinhcanban.com

Sự kiện beforeunload trong JavaScript (trước khi chuyển trang)

Cùng tìm hiểu về sự kiện beforeunload trong JavaScript. Bạn sẽ biết khái niệm, cách bắt sự kiện beforeunload, cũng như sử dụng beforeunload để huỷ load trang trong JavaScript sau bài học này.


Có 2 phương pháp bắt sự kiện beforeunload trong JavaScript như sau:

  • Sử dụng thuộc tính onbeforeunload để đăng ký trình xử lý sự kiện beforeunload vào Element
  • Sử dụng phương thức addEventListener

Sự kiện beforeunload trong JavaScript là gì

Sự kiện beforeunload trong JavaScript xảy ra ngay trước khi trang hiện tại được chuyển sang một trang khác. Sự kiện này phát sinh trên window Object trong JavaScript.

Tên sự kiện: beforeunload
Loại sự kiện: Event
Khả năng Bubbling: Không
Khả năng Cancel: Có

Sự kiện beforeunload thường được sử dụng để tạo hộp thoại giúp người dùng xác nhận có thực sự muốn chuyển sang trang mới từ trang hiện tại không. Để làm được điều này thì chúng ta cần xử lý Event Object chứa thông tin về sự kiện xảy ra được trả về, bằng phương thức preventDefault và thuộc tính returnValue như sau:

function beforeUnload(event){
event.preventDefault();
event.returnValue = 'a value';
}

Trong đó event.preventDefault() giúp huỷ đi việc chuyển trang, và returnValue = 'a value' giúp trả về một giá trị tuỳ ý để ở lại trang ban đầu.

Chúng ta sẽ cùng làm rõ hơn trong phần ví dụ ở phía dưới bài.

Bắt sự kiện beforeunload trong JavaScript

Để bắt sự kiện beforeunload trong JavaScript, chúng ta cần phải có một trình xử lý sự kiện (Event Handlers) giúp xử lý khi sự kiện beforeunload xảy ra, và phải đăng ký trình xử lý sự kiện này vào window Object.

Tuỳ vào cách đăng ký trình xử lý sự kiện mà chúng ta có 2 phương pháp bắt sự kiện beforeunload trong JavaScript sau đây:

Phương pháp 1: Sử dụng thuộc tính onbeforeunload để đăng ký trình xử lý sự kiện vào window Object

Chúng ta có thể sử dụng thuộc tính onbeforeunload của window Object để bắt sự kiện beforeunload, nếu trình xử lý sự kiện(Event Handlers) đã được đăng ký cho giá trị thuộc tính onbeforeunload của window Object.

Ví dụ cụ thể:

<script>
function beforeUnload(event){
event.preventDefault();
event.returnValue = 'a value';
}

window.onbeforeunload = beforeUnload;
</script>

Trong ví dụ này, trình xử lý sự kiện beforeUnload được đăng ký cho thuộc tính onbeforeunload của window Object, nên khi sự kiện beforeunload xảy ra, trình xử lý sự kiện sẽ bắt và xử lý nó.

Phương pháp 2: Sử dụng phương thức addEventListener

Với phương pháp này, chúng ta chỉ cần khai báo tên sự kiện beforeunload và tên trình xử lý sự kiện vào window Object bằng phương thức addEventListener là xong.

Ví dụ cụ thể:

<script>
function loadFinished(){
alert('Load');
}

window.addEventListener('beforeunload', loadFinished);
</script>

Trong ví dụ này, chúng ta dùng phương thức addEventListener của window Object để đăng ký trình xử lý sự kiện loadFinished tương ứng với tên sự kiên beforeunload, nhằm giúp bắt sự kiện beforeunload khi nó xảy ra.

Ví dụ bắt sự kiện beforeunload trong JavaScript

Hãy cùng xem một ví dụ cụ thể với mã HTML về cách bắt sự kiện beforeunload trong JavaScript như sau.

Chúng ta sẽ dùng phương thức addEventListener để bắt sự kiện beforeunload, sau đó làm xuất hiện hộp thoại giúp người dùng xác nhận có muốn chuyển sang trang mới hay không, cũng như các xử lý bên trong đó.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sample</title>

<script>
function beforeUnload(event){
event.preventDefault();
event.returnValue = 'Hello';
}

window.onbeforeunload = beforeUnload;
</script>

</head>
<body>

<p id="next"><a href="https://laptrinhcanban.com">Quay lại trang chủ</a></p>

<p id="sample">Ví dụ về beforeunload</p>

</body>
</html>

Với mã lệnh này, khi click vào đường link Quay lại trang chủ, một hộp thoại sẽ hiển thị giúp người dùng quyết định việc có di chuyển trang hay không.

Bắt sự kiện beforeunload trong JavaScript

Nếu click vào nút OK thì trang sẽ được dịch chuyển sang trang mới, nếu nếu nút Cancel thì sẻ ở lại trang hiện tại.

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách bắt sự kiện beforeunload trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME>> >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.