Menu
My question is similar but a bit different than the one asked here, window.onload vs <body onload=""/>
In that question, it was a comparison between using window.onload and the inline js .
My question is the difference between the following. Assume the body tag has an Id of "bodyTag".
document.getElementById("bodyTag").onload = function () {
alert("hi");
}
vs
window.onload = function () {
alert("hi");
}
Exactly, what are the differences between those two and when should I use one versus the other? This is only for pure JavaScript. Am I correct in assuming that the difference is that window.onload won't start until after the entire webpage is loaded, all styles have been loaded, and all Javascript code has been loaded? While with the first version (document.getElementById("bodyTag").onload=), that it waits for entire webpage to load (and CSS styles if it was declared as an external CSS file in head), but NOT for all the Javascript to load? Is that the difference?
613
Window (object) is sometimes reffered as global space container it contains all other objects (default and your custom one), it contains everything like indexedDB,session storage, cookies, your variables, your functions and everything within the browser page entirely. Basically, as I wrote above window is an object, it stores everything either as a method or property. let me explain what is property and what is method,
(function my_obj(){
this.firstName="john";
var middleName = "XYZ"
this.lastName="doe";
this.fullName = function(){
return this.firstName+" "+this.middleName+" "+this.lastName
}
document.write(this.fullName())
})();
In this example I created Object using constructor function, in this example firstName, middleName and lastName are reffered as property, and fullName() is called methed, (You can say that method is another name for function within an object).
so consider window like this
window{
preset_obj:{};
indexedDB:{......};
.
.
.
.
.
.
.
.
.
.
.
//your code loads in the end
var my_var= "JS rocks!"
var anti_me= "Are You out of your Mind?? JS??Huh!"
var dont_care= "I Love COBOL"
}
but body my friend is different case, (not to mention document and body are two different objects). If you give body an ID and use document.getElementByID('ID'). it will return object containing all Visible elements that are displayed in the page. but it will not contain all other window stuff like cookies, session storage. Same is the Case with document. Document selects entire HTML code that you write nothing more nothing less. in other word it is object that contains everything that is enclosed within <html></html>tags. hope this clears confusion
-----------------------UPDATE---------------------------------------------------
OK sorry didnt read your post correct.
window.onload will load when entire page is finished processing along with headers (not to be confused with head tag or HTML5 headertag).
document.onload will load just when frontend work (HTML, CSS and JS will finish loading) time difference isn't much unless you are sending 100KB+ code in headers, I'd say stick with window.onload unless your headers are large or you want to do something time specific to page display
103
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
