PHẦN CƠ BẢN
VÒNG LẶP
DATA TYPES
EVENTS
DOM
BOM
OBJECT
BỔ SUNG
THỰC HÀNH
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.

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.

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.

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.

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:

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

Cách dùng insertBefore trong javascript

Cách dùng insertBefore trong javascript

Cách dùng insertAfter trong Javascript

Cách dùng insertAfter trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentElement trong Javascript

Cách dùng parentElement trong Javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng hai số bằng Javascript (cộng hai số)

Tính tổng hai số bằng Javascript (cộng hai số)

Cách gán giá trị cho thẻ input trong javascript

Cách gán giá trị cho thẻ input trong javascript

Để gán giá trị cho thẻ input thì ta có hai cách, thứ nhất là…

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên dương trong javascript

Cách kiểm tra số nguyên dương trong javascript

Hàm closure trong javascript

Hàm closure trong javascript

Closure là một khái niệm không phải ai cũng ..

Biểu thức chính quy RegEx trong Javascript

Biểu thức chính quy RegEx trong Javascript

Bài này chúng ta sẽ tìm hiểu đến chuỗi và cách sử dụng biểu thức…

Cách dùng Import / Export Module trong javascript

Cách dùng Import / Export Module trong javascript

Khi bạn xây dựng một ứng dụng nhỏ thì việc đặt

Cơ chế hoạt động của hoisting trong Javascript

Cơ chế hoạt động của hoisting trong Javascript

Hoisting là vấn đề liên quan đến cách khai báo biến trong Javascript. Nó liên…

Cấp độ private / protected của class trong Javascript

Cấp độ private / protected của class trong Javascript

Top