> For the complete documentation index, see [llms.txt](https://edrus.gitbook.io/mt-it/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://edrus.gitbook.io/mt-it/2nd-month/week-6/dom-document-object-model/working-with-events/onload.md).
# onload
### The window’s load event
For the [`window`](https://www.javascripttutorial.net/javascript-bom/javascript-window/) object, the `load` event is fired when the whole webpage (HTML) has loaded fully, including all dependent resources, including JavaScript files, CSS files, and images.
To handle the `load` event, you register an event listener using the `addEventListener()` method:
```javascript
window.addEventListener('load', (event) => {
console.log('The page has fully loaded');
});Code language: JavaScript (javascript)
```
Or use the `onload` property of the `window` object:
```javascript
window.onload = (event) => {
console.log('The page has fully loaded');
};Code language: JavaScript (javascript)
```
If you maintain a legacy system, you may find that the `load` event handler is registered in of the body element of the HTML document, like this:
```xml
JS load Event Demo
Code language: HTML, XML (xml)
```
It’s a good practice to use the `addEventListener()` method to assign the `onload` event handler whenever possible.
### The image’s load event
The `load` event also fires on images. To handle the `load` event on images, you use the `addEventListener()` method of the image elements.
The following example uses the `load` event handler to determine if an image, which exists in the DOM tree, has been completely loaded:
```xml
Image load Event Demo
![]()
Code language: HTML, XML (xml)
```
You can assign an `onload` event handler directly using the `onload` attribute of the `![]()
` element, like this:
```xml
Code language: HTML, XML (xml)
```
If you create an image element dynamically, you can assign an `onload` event handler before setting the `src` property as follows:
```javascript
window.addEventListener('load' () => {
let logo = document.createElement('img');
// assign and onload event handler
logo.addEventListener('load', (event) => {
console.log('The logo has been loaded');
});
// add logo to the document
document.body.appendChild(logo);
logo.src = 'logo.png';
});
Code language: JavaScript (javascript)
```
How it works:
* First, create an image element after the document has been fully loaded by placing the code inside the event handler of the window’s load event.
* Second, assign the `onload` event handler to the image.
* Third, add the image to the document.
* Finally, assign an image URL to the `src` attribute. The image will be downloaded to the element as soon as the `src` property is set.
### The script’s load event
The `