Blog này sẽ chứng minh sự khác biệt giữa window.onload và document.onload trong JavaScript.
window.onload so với document.onload trong JavaScript
Các ' cửa sổ.onload ” sự kiện được kích hoạt khi toàn bộ trang (bao gồm cả tài nguyên của nó) đã tải xong. Điều này có nghĩa là bạn có thể sử dụng sự kiện này để đảm bảo trang được tải đầy đủ trước khi chạy bất kỳ mã nào dựa trên nội dung của trang.
Các ' tài liệu.onload ” tương tự như window.onload, nhưng nó chỉ kích hoạt khi DOM của tài liệu (cấu trúc nội dung của trang) tải xong. Điều này có nghĩa là bạn có thể sử dụng sự kiện này để đảm bảo rằng nội dung của trang đã được tải đầy đủ và sẵn sàng để thao tác trước khi chạy bất kỳ mã nào.
Cách tiếp cận tốt nhất để làm theo là gì?
Nói chung, bạn nên sử dụng document.onload thay vì window.onload nếu bạn chỉ cần đảm bảo rằng nội dung của trang được tải đầy đủ trước khi chạy mã của bạn. Điều này là do document.onload sẽ kích hoạt nhanh hơn window.onload, điều này có thể cải thiện hiệu suất mã của bạn. Tuy nhiên, nếu bạn cần đảm bảo rằng tài nguyên của trang (chẳng hạn như hình ảnh và biểu định kiểu) được tải đầy đủ trước khi chạy mã, thì bạn nên sử dụng window.onload để thay thế.
Làm cách nào để sử dụng window.onload so với document.onload trong JavaScript?
Trong ví dụ đã cho, chúng ta sẽ xem cách các sự kiện này xác định tải tài liệu và tải cửa sổ trước khi chạy bất kỳ mã nào.
Gọi ' tài liệu.onload ” thông báo cho bạn rằng tài liệu đã được tải bằng thông báo alert():
tài liệu. đang tải = báo động ( 'tài liệu_onload' ) ;Gọi ' cửa sổ.onload ” sự kiện và gán thông báo kết quả của phương thức alert() cho nó:
cửa sổ. đang tải = báo động ( 'window_onload' ) ;
Như bạn có thể thấy, khi trang được làm mới, tài liệu đầu tiên được tải và sau đó phương thức window onload được gọi khi toàn bộ trang đã tải xong:
Đó là tất cả về sự kiện window.onload và document.onload trong JavaScript.
Phần kết luận
Các ' cửa sổ.onload ' và ' tài liệu.onload ” là hai sự kiện JavaScript để đảm bảo tải toàn bộ trang trước khi thực thi bất kỳ mã nào. document.onload sẽ kích hoạt nhanh hơn window.onload, điều này có thể cải thiện hiệu suất của mã. Blog này đã chứng minh sự khác biệt giữa window.onload và document.onload trong JavaScript.