document.ready Vs window.onload in jquery | How to write document.ready in vanilla JavaScript

document.ready and window.onload vs window.addEventListener('load', (event) vs  document.addEventListener('DOMContentLoaded  vs

window.onload = (event)


What is the difference between document.ready and window.onload .Often it is confusing for the beginner or even experienced developer just using but have trouble to different with use case
In the vanilla javascript window.addEventListener('load', (event) and document.addEventListener('DOMContentLoaded .
you will learn about this confusing thing because all look similar to each other

Please follow this sample code for your information

   $(document).ready(function() {

     // Executes when the HTML document is loaded and the DOM is ready
     alert("Document is ready");
     });

     // .load() method deprecated from jQuery 1.8 onward
     $(window).on("load", function() {

     // Executes when complete page is fully loaded, including
     // all frames, objects and images
     alert("Window is loaded");
     });


//Log a message when the page is fully loaded:

window.addEventListener('load', (event) => {
  console.log('page is fully loaded');
});
//The same, but using the onload event handler property:

window.onload = (event) => {
  console.log('page is fully loaded');
};

// Vanilla
document.addEventListener('DOMContentLoaded', function() {
 //   alert("Document is ready");
    console.log('Document is ready');
})
 

Github link for practice advance javascript