JS 32 – Sự kiện onload và onerror trong JavaScript

0
100

Xin chào các bạn, trong bài học ngày hôm nay mình sẽ giới thiệu đến các bạn sự kiện onload và onerror trong JavaScript.

Trình duyệt cho phép chúng ta theo dõi việc tải tài nguyên từ bên ngoài như tập lệnh, iframe, hình ảnh…

Có hai sự kiện giành cho nó:

  • onload – tải thành công,
  • onerror – đã xảy ra lỗi.

Tải một đoạn code

Giả sử chúng ta cần gọi một hàm nằm trong tập lệnh bên ngoài. Chúng ta có thể tải nó như sau:

Nhưng làm thế nào để chạy hàm được khai báo bên trong tập lệnh đó? Chúng ta cần phải chờ cho đến khi load đoạn code, và sau đó chúng ta có thể gọi nó.

script.onload

Đây là sự kiện load. Nó kích hoạt sau khi đoạn code được tải và thực hiện.

Ví dụ:

Vì vậy, trong onload chúng ta có thể sử dụng các biến, chạy các hàm…

Và nếu tải không thành công thì sao? Ví dụ: không có đoạn code như vậy (lỗi 404) hoặc  máy chủ không hoạt động (không khả dụng).

script.onerror

Lỗi xảy ra trong quá trình tải (nhưng không thực thi) của tập lệnh có thể được theo dõi trên sự kiện error.

Ví dụ: hãy yêu cầu một đoạn code không tồn tại:

Lưu ý rằng chúng ta không thể nhận được chi tiết lỗi ở đây. Chúng tôi không biết đó là lỗi 404 hay 500 hay cái gì khác. Chỉ là tải không thành công.

Các resource khác

Các sự kiện loaderror cũng hoạt động với các tài nguyên khác. Có thể có sự khác biệt nhỏ ở đây.

Ví dụ:

<img>, <link> (bảng định kiểu bên ngoài)
Cả sự kiện loaderror đều hoạt động như mong đợi.
<iframe>
Sự kiện load chỉ hoạt động khi tải iframe hoàn tất. Nó kích hoạt cả cho tải thành công và trong trường hợp có lỗi.

Nói tóm lại hình ảnh <img>, external styles, tập lệnh và các tài nguyên khác cung cấp các sự kiện loaderror để chúng ta theo dõi quá trình tải của chúng:

  • load kích hoạt khi tải thành công,
  • error kích hoạt khi tải không thành công.

Ngoại lệ duy nhất là <iframe>: nó luôn kích hoạt sự kiện load, cho bất kỳ hoàn cảnh nào ngay cả khi không tìm thấy trang.

Sự kiện readystatechange cũng hoạt động cho các resource, nhưng hiếm khi được sử dụng, bởi vì các sự kiện load/error đơn giản hơn.

Kết luận

Như vậy trong bài học ngày hôm nay chúng ta đã cùng nhau tìm hiểu về sự kiện onload và onerror trong JavaScript. Trong bài học tiếp theo mình sẽ giới thiệu đến các bạn Break và Continute trong JavaScript.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây