HOME › học javascript - lập trình javascript cơ bản>>15. sự kiện trong javascript

Sự kiện load trong JavaScript (khi trang HTML được load xong)

25 tháng 6 ,2022

Cùng tìm hiểu về sự kiện load trong JavaScript. Bạn sẽ biết trong JavaScript sự kiện load thực hiện khi nào cũng như cách bắt sự kiện load bằng thuộc tính onload trong JavaScript sau bài học này.

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

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

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

Sự kiện load trong JavaScript xảy ra khi toàn bộ các thành phần có trong một trang HTML như ảnh hay script đều được load xong. Sự kiện này phát sinh trên window Object trong JavaScript.

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

Bắt sự kiện load trong JavaScript

Để bắt sự kiện load 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 load 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 load trong JavaScript sau đây:

Phương pháp 1: Sử dụng thuộc tính onload để đă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 onload của window Object để bắt sự kiện load, nếu trình xử lý sự kiện(Event Handlers) đã được đăng ký cho giá trị thuộc tính onload của window Object.

Ví dụ cụ thể:

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

window.onload = loadFinished;
</script>

Trong ví dụ này, trình xử lý sự kiện load() được đăng ký cho thuộc tính onload của window Object, nên khi sự kiện load xảy, 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 load 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('load', 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 load, nhằm giúp bắt sự kiện load khi nó xảy ra.

Xem thêm: addEventListener trong JavaScript

Trong trường hợp bắt sự kiện bằng phương thức addEventListener trong JavaScript, một Event Object chứa các thông tin về sự kiện đã xảy ra sẽ được trả về.

Đối với sự kiện load, Event Object cũng sẽ được trả về. Chúng ta có thể thao tác với các thông tin chứa trong sự kiện qua đối tượng Object này.

Ví dụ chúng ta có thể lấy và xem thông tin về sự kiện đã xảy ra thông qua thao tác với đối tượng Object được trả về này.

<script>
function loadFinished(event){
    console.log(event);
}

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

Ví dụ bắt sự kiện load 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 load trong JavaScript như sau. Trong ví dụ này chúng ta sử dụng tới phương pháp 2: Sử dụng phương thức addEventListener để bắt sự kiện load. Các phương pháp khác cũng tiến hành tương tự.

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

<script>
function loadFinished(){
    let zooImg = document.getElementById('trang');
    console.log(zooImg.naturalWidth);
    console.log(zooImg.naturalHeight);
}

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

</head>
<body>

<p>Ví dụ sử dụng load</p>

<img src="trang.jpg" id="trang">

</body>
</html>

Với mã lệnh này, chúng ta đã tạo ra trang HTML với các thành phần, bao gồm cả hình ảnh. Và sự kiện load sau khi tất cả các thành phần được load vào trang HTML được đăng ký vào window, bằng cách sử dụng phương thức addEventListener.

Do đó sau khi toàn bộ các thành phần được load vào HTML, sự kiện load sẽ được bắt, dẫn đến trình xử lý sự kiện loadFinished được thực thi và hiện kết quả ra màn hình như sau:

Kiểm tra sự kiện load trang trong javascript bằng thuộc tính onload của thẻ body

Bổ sung thêm một phương pháp khác dùng để kiểm tra trang HTML được load xong chưa, đó là sử dụng thuộc tính onload của thẻ body.

Cách sử dụng thuộc tính này để bắt sự kiện load cũng tương tự như cách dùng với thuộc tính onload của window Object. Ví dụ:

<head>
<script>
function loadFinished(){
    alert('Load');
}
</script>
</head>
<body onload = loadFinished()>

...
</body>

Lưu ý trong trường hợp cả thuộc tính onload của thẻ body lẫn của window Object đều được khai báo, các thuộc tính khai báo trước được bỏ qua và chỉ có thuộc tính nào khai báo sau cùng sẽ được sử dụng mà thôi.

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách bắt sự kiện load 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.