Execute JavaScript on HTML Load

A memo about how to execute JavaScript when HTML is loaded, or when a web page is completely loaded.

DOMContentLoaded is for HTML, onload is for the entire web page.

In JavaScript, you specify the event with addEventListener.

You can verify with the code below, but naturally, DOMContentLoaded will be output first. Actually, depending on the website, DOMContentLoaded may never be output no matter how long you wait. This is true for my WordPress blog, and YouTube as well.

//# dev
document.addEventListener("load", function() {
   // Process you want to execute
   console.log('loaded.')
});

document.addEventListener("DOMContentLoaded", function() {
   // Process you want to execute
   console.log('DOMContentLoaded.')
});

So before starting development on a new site, I think it’s better to assume onload doesn’t work, and if you’re going to use it, always verify with the above code first.