It is unnecessary to wait for style sheets, images, or subframes to completely load before the DOMContentLoaded event is triggered, which occurs once the primary HTML content has been entirely loaded and processed. This event is considered non-cancelable and serves as a generic event within JavaScript.
When working with JavaScript placed in the head section of a webpage, it is crucial to manage the DOMContentLoaded event to access elements within the body. The load event is triggered once the entire page has finished loading. However, there are instances where using DOMContentLoaded is the more suitable choice; it is a frequent error to mistakenly employ the load event instead.
Syntax
Methods associated with the DOMContentLoaded event, such as addEventListener, utilize the event name in conjunction with the identifier or class name. This approach serves as an alternative to establishing an event handler property.
Upon the loading of the DOM content, the subsequent code is executed:
<script>
document.addEventListener('DOMContentLoaded', () => {
let event_operation = document.getElementById('id_name');
event_operation.addEventListener('click', () => {
//handle DOMContentLoaded event
});
});
</script>
Examples
The examples pertaining to the DOMContentLoaded event illustrate the process of managing this event using JavaScript.
Example 1: The fundamental DOMContentLoaded event illustration demonstrates the data associated with the event handler. Whenever the page is executed, the DOMContentLoaded event triggers, loading the page alongside the event. This represents a basic event utilizing a JavaScript property.
<html>
<head>
<title> JavaScript DOMContentLoaded Event </title>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
console.log('DOMContentLoaded event fully loaded');
// handle the DOMContentLoaded event
document.getElementById("output_data").innerHTML = "DOMContentLoaded event fully loaded";
});
</script>
</head>
<body>
<p> JavaScript DOMContentLoaded Event </p>
<p id = "output_data" style = "color:orange;"> </p>
</body>
</html>
Output
The image below illustrates the result generated by the DOMContentLoaded event.
Example 2: The fundamental DOMContentLoaded event demonstration illustrates the click event handler that incorporates data.
Whenever we press the button on the webpage, the DOMContentLoaded event triggers a page load alongside the event itself. This is an event related to button clicks, facilitated by a JavaScript property.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript DOMContentLoaded Event </title>
<script>
document.addEventListener('DOMContentLoaded', () => {
let btn_var = document.getElementById('btn_var');
btn_var.addEventListener('click', () => {
// handle the DOMContentLoaded click event
document.getElementById("output_data").innerHTML = "DOMContentLoaded click event";
});
});
</script>
</head>
<body>
<p> JavaScript DOMContentLoaded Event </p>
<button id = "btn_var"> Click Here! </button>
<p id = "output_data" style = "color:orange;"> </p>
</body>
</html>
Output
The image displayed below illustrates the results of the DOMContentLoaded event.
Example 3: The fundamental DOMContentLoaded event illustration demonstrates the click event handler alongside accompanying data.
Whenever we press the button, the DOMContentLoaded event triggers the loading of the page after a brief delay or a specified duration. This button click event operates in conjunction with the "for" loop feature in JavaScript.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript DOMContentLoaded Event </title>
<script>
document.addEventListener('DOMContentLoaded', () => {
let btn_var = document.getElementById('btn_var');
btn_var.addEventListener('click', () => {
let dom;
for( dom = 0; dom < 90000000; dom++)
{}
// handle the DOMContentLoaded click event
document.getElementById("output_data").innerHTML = "DOMContentLoaded click event loaded after few time : " +dom;
});
});
</script>
</head>
<body>
<p> JavaScript DOMContentLoaded Event </p>
<button id = "btn_var"> Click Here! </button>
<p id = "output_data" style = "color:orange;"> </p>
</body>
</html>
Output
The image below illustrates the result produced by the DOMContentLoaded event.
Example 4: This fundamental demonstration of the DOMContentLoaded event illustrates the click event handler accompanied by data.
Whenever we click on the button present on the webpage, the DOMContentLoaded event triggers a page load alongside the event itself. This is a JavaScript function that processes data pertinent to the DOMContentLoaded event.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript DOMContentLoaded Event </title>
<script>
function doworking() {
console.info('DOMContentLoaded loads page');
document.getElementById("output_data").innerHTML = "DOMContentLoaded loads page";
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', doworking);
} else {
// `DOMContentLoaded`leredy working event
doworking();
}
</script>
</head>
<body>
<p> JavaScript DOMContentLoaded Event </p>
<p id = "output_data" style = "color:orange;"> </p>
</body>
</html>
Output
The image below illustrates the result of the DOMContentLoaded event.
Conclusion
To ensure that the DOM is parsed as swiftly as possible upon the user's request for the page, we can configure JavaScript to load asynchronously and enhance the loading efficiency of stylesheets. When stylesheets are loaded in the standard manner, they can "consume" bandwidth that would otherwise be directed towards the primary HTML content, which can hinder the speed of DOM parsing since they load simultaneously.