Tóm lược. trong hướng dẫn này, bạn sẽ tìm hiểu cách xử lý sự kiện tải kích hoạt trên các thành phần tài liệu, hình ảnh và tập lệnh trong JavaScript
Sự kiện tải của cửa sổ
Đối với đối tượng
6, sự kiệnCode language: JavaScript [javascript]
window.onload = [event] => { console.log['The page has fully loaded']; };
7 được kích hoạt khi toàn bộ trang web [HTML] đã được tải đầy đủ, bao gồm tất cả các tài nguyên phụ thuộc, bao gồm tệp JavaScript, tệp CSS và hình ảnhCode language: JavaScript [javascript]
window.onload = [event] => { console.log['The page has fully loaded']; };
Để xử lý sự kiện
7, bạn đăng ký một trình lắng nghe sự kiện bằng phương thứcCode language: JavaScript [javascript]
window.onload = [event] => { console.log['The page has fully loaded']; };
0Code language: JavaScript [javascript]
window.onload = [event] => { console.log['The page has fully loaded']; };
Code language: JavaScript [javascript]
window.addEventListener['load', [event] => { console.log['The page has fully loaded']; }];
Hoặc sử dụng thuộc tính
1 của đối tượngCode language: JavaScript [javascript]
window.onload = [event] => { console.log['The page has fully loaded']; };
2Code language: JavaScript [javascript]
window.onload = [event] => { console.log['The page has fully loaded']; };
window.onload = [event] => { console.log['The page has fully loaded']; };
Code language: JavaScript [javascript]
Nếu bạn duy trì một hệ thống kế thừa, bạn có thể thấy rằng trình xử lý sự kiện
7 đã được đăng ký trong phần tử nội dung của tài liệu HTML, như thế nàyCode language: JavaScript [javascript]
window.onload = [event] => { console.log['The page has fully loaded']; };
Code language: HTML, XML [xml]
JS load Event Demo
Đó là một cách thực hành tốt để sử dụng phương pháp
0 để chỉ định trình xử lý sự kiệnCode language: JavaScript [javascript]
window.onload = [event] => { console.log['The page has fully loaded']; };
1 bất cứ khi nào có thểCode language: JavaScript [javascript]
window.onload = [event] => { console.log['The page has fully loaded']; };
Sự kiện tải hình ảnh
Sự kiện
7 cũng kích hoạt hình ảnh. Để xử lý sự kiệnCode language: JavaScript [javascript]
window.onload = [event] => { console.log['The page has fully loaded']; };
7 trên ảnh, bạn sử dụng phương thứcCode language: JavaScript [javascript]
window.onload = [event] => { console.log['The page has fully loaded']; };
0 của các thành phần ảnhCode language: JavaScript [javascript]
window.onload = [event] => { console.log['The page has fully loaded']; };
Ví dụ sau sử dụng trình xử lý sự kiện
7 để xác định xem một hình ảnh tồn tại trong cây DOM đã được tải hoàn toàn hay chưaCode language: JavaScript [javascript]
window.onload = [event] => { console.log['The page has fully loaded']; };
Code language: HTML, XML [xml]
Image load Event Demo let logo = document.querySelector['#logo']; logo.addEventListener['load', [event] => { console.log['Logo has been loaded!']; }]; logo.src = "logo.png";
Bạn có thể chỉ định trực tiếp một trình xử lý sự kiện
1 bằng cách sử dụng thuộc tínhCode language: JavaScript [javascript]
window.onload = [event] => { console.log['The page has fully loaded']; };
1 của phần tửCode language: JavaScript [javascript]
window.onload = [event] => { console.log['The page has fully loaded']; };
2, như thế nàyCode language: HTML, XML [xml]
JS load Event Demo
3Code language: JavaScript [javascript]
window.addEventListener['load', [event] => { console.log['The page has fully loaded']; }];
Nếu bạn tạo phần tử hình ảnh động, bạn có thể chỉ định trình xử lý sự kiện
1 trước khi đặt thuộc tínhCode language: JavaScript [javascript]
window.onload = [event] => { console.log['The page has fully loaded']; };
4 như sauCode language: HTML, XML [xml]
JS load Event Demo
6Code language: JavaScript [javascript]
window.addEventListener['load', [event] => { console.log['The page has fully loaded']; }];
Làm thế nào nó hoạt động
- Đầu tiên, tạo một thành phần hình ảnh sau khi tài liệu đã được tải đầy đủ bằng cách đặt mã bên trong trình xử lý sự kiện của sự kiện tải cửa sổ
- Thứ hai, gán trình xử lý sự kiện
1 cho hình ảnhwindow.onload = [event] => { console.log['The page has fully loaded']; };
- Thứ ba, thêm hình ảnh vào tài liệu
- Cuối cùng, gán URL hình ảnh cho thuộc tính
4. Hình ảnh sẽ được tải xuống phần tử ngay khi thuộc tính
Code language: HTML, XML [xml]JS load Event Demo
4 được đặt
Code language: HTML, XML [xml]JS load Event Demo
Sự kiện tải của tập lệnh
Phần tử
8 cũng hỗ trợ sự kiệnCode language: HTML, XML [xml]
JS load Event Demo
7 hơi khác so với các cách tiêu chuẩn. Sự kiệnCode language: JavaScript [javascript]
window.onload = [event] => { console.log['The page has fully loaded']; };
7 của tập lệnh cho phép bạn kiểm tra xem tệp JavaScript đã được tải hoàn toàn chưaCode language: JavaScript [javascript]
window.onload = [event] => { console.log['The page has fully loaded']; };
Không giống như hình ảnh, trình duyệt web chỉ bắt đầu tải xuống các tệp JavaScript sau khi thuộc tính
4 đã được chỉ định và phần tửCode language: HTML, XML [xml]
JS load Event Demo
8 đã được thêm vào tài liệuCode language: HTML, XML [xml]
JS load Event Demo
Đoạn mã sau tải tệp
3 sau khi trang đã được tải hoàn toàn. Nó chỉ định một trình xử lý sự kiệnCode language: HTML, XML [xml]
Image load Event Demo let logo = document.querySelector['#logo']; logo.addEventListener['load', [event] => { console.log['Logo has been loaded!']; }]; logo.src = "logo.png";
1 để kiểm tra xemCode language: JavaScript [javascript]
window.onload = [event] => { console.log['The page has fully loaded']; };
3 đã được tải đầy đủ chưaCode language: HTML, XML [xml]
Image load Event Demo let logo = document.querySelector['#logo']; logo.addEventListener['load', [event] => { console.log['Logo has been loaded!']; }]; logo.src = "logo.png";