<Htmlxmlns= "Http://www.w3.org/1999/xhtml"><Head><MetaHttp-equiv= "Content-type"Content= "text/html; Charset=utf-8 "/><Title></Title><ScriptType= "Text/javascript"Src= "Jquery2.js"></Script><ScriptLanguage= "JavaScript">Window.onload=Haha ();functionHaha () {Console.log (document.getElementById ("Div1"</script></head><< Span style= "color: #800000;" >body> <div Span style= "color: #ff0000;" >id= "Div1" >a</ div></body></html< Span style= "color: #0000ff;" >>
The execution result is null. window.onload = haha (); This is wrong, do not need parentheses, the reference without parentheses, the parentheses are the function return value, the page has not finished loading on the execution, of course, null. window.onload = haha; This is the correct way to do it.
<Htmlxmlns= "Http://www.w3.org/1999/xhtml"><Head><MetaHttp-equiv= "Content-type"Content= "text/html; Charset=utf-8 "/><Title></Title><ScriptType= "Text/javascript"Src= "Jquery2.js"></Script><ScriptLanguage= "JavaScript">Window.onload=hahafunctionHaha () {Console.log (document.getElementById ("Div1"));}If(Document.addeventlistener) {functionDomcontentloaded () {Console.log ("domcontentloaded"); } document.addeventlistener ("domcontentloaded", domcontentloaded,False); } </script>< Span style= "color: #0000ff;" ></head><< Span style= "color: #800000;" >body> <div Span style= "color: #ff0000;" >id= "Div1" >a</ div></body></html< Span style= "color: #0000ff;" >>
In Chrome, IE10 and Firefox, the result is: domcontentloaded then the onload output. So in general, the Domcontentloaded event is executed before Window.onload, and the domcontentloaded event is executed when the DOM tree is built. When the Window.onload event is triggered, all the DOM, style sheets, scripts, images, and flash on the page have been loaded and completed.
If you are a jquery user, you may often use $ (document). Ready (), or $ (function () {}), which is used with the domcontentloaded event. Here is the official explanation:
The following three formulations are equivalent:
In addition, it is important to note that:
//window.onload cannot write more than one at a time. //function () {alert ("test1" );}; Window.onload = function () {alert ("test2" );}; //$ (document). Ready () can write multiple // results output $ (document) twice. Ready ( functionfunction () {alert ("Hello again"); Below we discuss and test the window.onload and body in the onload:
<Htmlxmlns= "Http://www.w3.org/1999/xhtml"><Head><MetaHttp-equiv= "Content-type"Content= "text/html; Charset=utf-8 "/><Title></Title><ScriptType= "Text/javascript"Src= "Http://code.jquery.com/jquery-1.9.0.js"></Script><ScriptLanguage= "JavaScript">Window.onload=hahafunctionHaha () {Console.log ("Window.onload");}If(Document.addeventlistener) {functionDomcontentloaded () {Console.log ("domcontentloaded"); } document.addeventlistener ("domcontentloaded", domcontentloaded,False); }</Script></head><body onload< Span style= "color: #0000ff;" >= "Console.log (' bodyonload ');" > <div id= "Div1" >a</ div></body></html< Span style= "color: #0000ff;" >>
under IE10 and Firefox , the result is: the onload in the body is overwritten window.onload
"Domcontentloaded"
"Bodyonload"
under Chrome , the result is:
domcontentloaded
Window.onload
Bodyonload
Then, if you move the JavaScript code to the bottom, what will the result be?
<Htmlxmlns= "Http://www.w3.org/1999/xhtml"><Head><MetaHttp-equiv= "Content-type"Content= "text/html; Charset=utf-8 "/><Title></Title><ScriptType= "Text/javascript"Src= "Http://code.jquery.com/jquery-1.9.0.js"></Script></Head><BodyOnLoad= "Console.log (' bodyonload ');"><DivId= "Div1">a</Div></Body></Html><ScriptLanguage= "JavaScript">Window.onload=hahafunction Haha () {Console.log ( "window.onload" );} if (Document.addeventlistener) { function domcontentloaded () {Console.log ( "domcontentloaded" ); } document.addeventlistener ( "domcontentloaded "false );
</script>
Chrome and IE10, Firefox results are the same:
domcontentloaded
Window.onload
IE10, Firefox can understand, window.onload and body in the onload who is below who who covers who, will only perform the latter.
Window.onload, domcontentloaded, and $ (document). Ready ()
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
