Sự khác biệt giữa hai sự kiện document load và DOMContentLoaded trong JavaScript liên quan đến thời điểm khi trình duyệt tải và phân tích nội dung trang.
DOMContentLoaded Eventdocument.addEventListener('DOMContentLoaded', function() {
console.log('DOM content loaded and parsed');
});
load, vì không cần đợi các tài nguyên ngoài được tải xong.load EventDOMContentLoaded.window.addEventListener('load', function() {
console.log('All resources finished loading');
});
DOMContentLoaded, chỉ khi tất cả tài nguyên đã tải xong.| Đặc điểm | DOMContentLoaded Event | load Event |
|---|---|---|
| Thời điểm kích hoạt | Khi DOM được phân tích cú pháp xong | Khi toàn bộ trang và tài nguyên được tải xong |
| Tài nguyên ngoài | Không cần chờ hình ảnh, video, CSS tải xong | Chờ tất cả hình ảnh, video, CSS tải xong |
| Thời gian kích hoạt | Xảy ra sớm hơn | Xảy ra muộn hơn |
| Trường hợp sử dụng | Thao tác DOM ngay khi HTML sẵn sàng | Thực hiện sau khi mọi tài nguyên đã sẵn sàng |
DOMContentLoaded phù hợp khi bạn chỉ cần thao tác với DOM ngay khi cấu trúc HTML đã tải xong.load được dùng khi bạn cần đảm bảo rằng toàn bộ tài nguyên (ảnh, video, v.v.) đã được tải trước khi thực hiện hành động.
