PHẦN CƠ BẢN
VÒNG LẶP
DATA TYPES
EVENTS
DOM
BOM
OBJECT
BỔ SUNG
THỰC HÀNH
JAVASCRIPT CĂN BẢN
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Sự kiện window.onload trong Javascript

Trong bài này chúng ta sẽ tìm hiểu sự kiện window.onload trong javascript, đây là sự kiện xảy ra khi mọi tài nguyên của website đã load xong.

test php

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Javascript có một sự kiện được sử dụng khá nhiều đó là sự kiện onload. Nếu bạn đã từng làm việc với jQuery thì bạn sẽ thấy thường trước khi viết bất kì đoạn code nào ta đều đặt nó trong lệnh $(document).ready(), bản chất đó chính là sự kiện onload trong Javascript.

1. Sự kiện window.onload là gì?

Sự kiện window.onload có ý nghĩa rằng khi trình duyệt đã load xong mọi thứ (image, js, css) thì những đoạn code nằm bên trong đó mới được chạy. Bạn có thể sử dụng sự kiện này với các thẻ HTML liên quan đến việc tải dữ liệu như thẻ img hoặc thẻ iframe.

Sự kiện này rất quan trọng, nó giúp ta biết được khi nào thì trình duyệt tải xong hết các tài nguyên trên hệ thống, giúp ta có thể can thiệp vào quá trình tải dữ liệu của trình duyệt.

Bài viết này được đăng tại [free tuts .net]

Cú pháp của javascript onload như sau:

window.onload = function()
{
    // code
};

Trong đó phần code chính là những đoạn mã javascript mà bạn muốn chạy khi xảy ra sự kiện onload, tức là khi trình duyệt đã load xong mọi thứ.

2. Hiểu về quá trình biên dịch trong Javascript

Cũng như các ngôn ngữ lập trình khác, Javascript sẽ chạy biên dịch từ trên xuống dưới và từ trái qua phải. Chính vì vậy, khi sử dụng một hàm mà phía trên nó không tồn tại hàm đó thì sẽ bị bái lỗi undefined. Và để giải quyết vấn đề này thì ta sẽ dùng sự kiện onload trong js.

Trường hợp file js riêng

Javascript sẽ load tất cả dữ liệu của file JS xong rồi mới biên dịch, vì vậy thứ tự các hàm nằm trong cùng một file javascript là không quan trọng.

Ví dụ: Nếu đoạn code dưới đây nằm trên cùng một file thì không có lỗi mặc dù hàm do_validate được định nghĩa phía dưới.

var flag = do_validate();
function do_validate(){
    // code here
}

Giả sử bạn có hàm A nằm trong file a.js và trong file b.js có sử dụng hàm A đó thì bắt buộc bạn phải import file a.js trước file b.js. Điều này tuân theo quy tắc load theo thứ tự.

Ví dụ: Đoạn code này sai vì hàm do_validate() mặc dù đã định nghĩa ở file a.js, nhưng nó lại được import phía dưới nên theo quy tắc là chưa được load.

file a.js
function do_validate()
{
    // return TRUE/FALSE;
}
index.html
<script>
    // Sai vì hàm do_validate chưa được định nghĩa
    var flag = do_validate();
</script>
<script src="a.js"></script>

Nhưng nếu sửa lại như thế này thì sẽ đúng:

<script src="a.js"></script>
<script>
    // Sai vì hàm do_validate chưa được định nghĩa
    var flag = do_validate();
</script>

Trường hợp đặt trong thẻ html

Khi các bạn gán một hàm nào đó cho một sự kiện nào đó trong HTML thì cũng phải tuân theo quy luật trên, nghĩa là nếu bạn gán một hàm mà phía trên thẻ HTML đó không có thì nó sẽ thông báo lỗi là undefined.

Ví dụ: Đoạn code này cũng sai vì hàm do_validate() ở phía trên thẻ HTML chưa được định nghĩa.

<html>
  <body>
    <button onclick="do_validate()">Click me</button>
    <script language="javascript">
      function do_validate()
      {
        // return TRUE/FALSE;
      } 
    </script>
  </body>
</html>

Nhưng nếu bạn sửa lại như thế này thì sẽ đúng:

<html>
  <body>
    <script language="javascript">
      function do_validate()
      {
        // return TRUE/FALSE;
      } 
    </script>
    <button onclick="do_validate()">Click me</button>
  </body>
</html>

Trường hợp đặt trong nhiều thẻ script

Javascript sẽ load tất cả các đoạn code bên trong mỗi thẻ script rồi mới biên dịch, tức là nó duyệt từ trên xuống, gặp thẻ script nào là load tất cả các mã js bên trong đó và biên dịch, sau đó rồi mới nhảy sang thẻ script tiếp theo.

Vì vậy, nếu bạn dùng một hàm được định nghĩa phía dưới nhưng nằm chung thẻ script thì không sao.

<script>
    var flag = do_validate();
    function do_validate(){
        // code here
    }
</script>

Nhưng nếu nó nằm hai thẻ script khác nhau thì sẽ bị lỗi.

<script>
    // Sai vì hàm do_validate() chưa được định nghĩa
    var flag = do_validate(); 
</script>
<script>
    function do_validate(){
        // code here
    }
</script>

3. Ví dụ về sự kiện onload trong Javascript

Những đoạn code nằm bên trong sự kiện onload sẽ được chạy sau cùng, khi mà trình biên dịch javascript đã load đủ thông tin về dom, biến, hàm .... Chính vì vậy, nếu trong sự kiện onload bạn gọi tới một hàm nào đó thì sẽ không cần quan tâm đến việc hàm đó được đặt tại vị trí nào.

Ví dụ 1: Trong đoạn code này mình gọi hàm do_validate() bên trong sự kiện window.onload nên mặc dù hàm validate được đặt phía dưới nhưng vẫn đúng.

<script>
    window.onload = function()
    {
        do_validate();
    };
</script>
<script>
    function do_validate()
    {
        alert(1);
    }
</script>

Ví dụ 2: Nếu vẫn chưa tin thì bạn làm ví dụ sau đây, trong ví dụ này ta thực hiện alert lên thứ tự của quá trình biên dịch

Demo RUN
alert(1);

window.onload = function()
{
    alert(3);	
};

alert(2);

Nếu chạy theo thứ tự sẽ là 1 -> 3 -> 2, nhưng do sự kiện onload sẽ thực hiện cuối cùng nên thứ tự sẽ là 1 -> 2 -> 3.

4. Lời kết

Như vậy sự kiện onload trong Javascript được sử dụng khá nhiều bởi nó được xử lý sau cùng nên sẽ tránh được khá nhiều lỗi undefined. Tuy nhiên, không phải lúc nào sử dụng nó đều tốt mà bạn phải cân nhắc nhé. Và đáng lẽ ra bài này mình viết ở những bài đầu tiên nhưng mình sợ khó giải thích bởi vì nó liên quan đến hàm trong javascript, sự kiện trong javascript.

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và __proto__ trong JavaScript

Phân biệt prototype và __proto__ trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...

Cách gộp hai object javascript lại với nhau

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng innerHTML trong Javascript

Top