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. Show 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 1. Sự kiện window.onload là gì?Sự kiện 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 JavascriptCũ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êngJavascript 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 var flag = do_validate(); function do_validate(){ // code here } Giả sử bạn có hàm Ví dụ: Đoạn code này sai vì hàm 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ẻ htmlKhi 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 <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ẻ scriptJavascript 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 JavascriptNhững đoạn code nằm bên trong sự kiện Ví dụ 1: Trong đoạn code này mình gọi hàm <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 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ếtNhư 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. |