Sự kiện window.onload trong javascript

Công nghệ Lập trình JavaScript

20/12
Thạch
JavaScript
0
240

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 như hình ảnh - mã css - mã javascript đã load xong.

Bài 25: Hiểu rõ return TRUE/FALSE 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.

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>
    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

<html>
    <body>
        <input type="text" id="txt-val" value="" />
        <div id="result"></div>
        <script language="javascript">
          
          	alert(1);
          
            window.onload = function()
            {
            	alert(3);	
            };
          
          	alert(2);
          
        </script>
    </body>
</html>

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.

Bài 27: Hàm addEventListener() trong Javascript