A) When HTML/DOM elements are ready:JavaScript

document.addEventListener('readystatechange', event => {  

    // When HTML/DOM elements are ready:
    if (event.target.readyState === "interactive") {   //does same as:  ..addEventListener("DOMContentLoaded"..
        alert("hi");
   "hi }
}1");


 
// ################  JQUERY  ################ //}

$(document).ready(function() {   //actually, shorthandWhen iswindow :loaded $(function() { 
external resources are loaded too- alert("hi");
});

B) When window loaded ( external resources are loaded too- css,src, etc...)

document.addEventListener('readystatechange'`css`, event`src`, =>etc...) {
    if (event.target.readyState === "complete") {
        alert("Hi""hi 2");
    }
});


 

same for jQuery:

$(document).ready(function() {   //same ################as: $(function() { JQUERY 
  ################ //  alert("hi 1");
});

$(window).load(function() {
     alert("Hi""hi 2");
});

NOTE: - Don't use the below markup ( because it overwrites other same-kind declarations ) :

document.onreadystatechange = ...

A) When HTML/DOM elements are ready:

document.addEventListener('readystatechange', event => { 
    if (event.target.readyState === "interactive") {   //does same as:  ..addEventListener("DOMContentLoaded"..
        alert("hi");
    }
 
});



// ################  JQUERY  ################ // 

$(document).ready(function() {   //actually, shorthand is : $(function() { 
     alert("hi");
});

B) When window loaded ( external resources are loaded too- css,src, etc...)

document.addEventListener('readystatechange', event => {
 
    if (event.target.readyState === "complete") {
        alert("Hi");
    }
 
});



// ################  JQUERY  ################ // 

$(window).load(function() {
    alert("Hi");
});

NOTE: - Don't use the below markup ( because it overwrites other same-kind declarations ) :

document.onreadystatechange = ...