<button class="btn" onclick="fn()">按鈕</button>
window.onload=function(){ //觸發不了 fn未定義 fn is not defined //var btn=document.getElementsByClassName('btn')[0]; //function fn(){ // alert('666') //} } //可以觸發 function fn(){ alert('666') }
為什么會這樣呢？window.onload事件難道不是在頁面加載完時候就去執行嗎？
沒錯，我們來理一下其中的思路。
首先，window.onload事件是在整個頁面包括dom結構、圖片等等全部加載完成之后才會觸發。
其次，HTML加載時由上往下的，在HTML加載的時候，遇到function關鍵字，聲明一個函數的時候，就會在內存中開辟一個新的空間來對函數進行存儲，方便以后進行調用。
所以，當將function f()寫到window.onload()=function(){}內部的時候，需要整個頁面加載完成的之后，才聲明這個函數，
也就意味着，當HTML加載到onclick="f()"的時候，window.onload=function(){}里面的函數f還沒有被聲明，這時候內存中就找不到function f()，於是就會報錯。
那么，將function f()移到window.onload()=function(){}外，則HTML加載到<head></head>的時候就會聲明函數f了，
所以進行onclick綁定的時候就能夠在內存中找到f()並進行調用。
除了這是涉及HTML加載順序的問題，還有一點就是可以從函數作用域這方面去考慮。
寫在window.onload()=function(){}內部的function f()就是在一個匿名函數內部的局部函數，並不是全局函數，所以onclick="f()"調用的時候是調用不到的。
但是如果你在第一段代碼中，function f()函數后面加上obj.onclick = f;那程序就又能正常運行了。
這是因為直接將函數f綁定給obj對象點擊事件上了，所以就不在window.onload()=function(){}的作用域下，就可以成功調用該函數了！
提到window.onload事件，補充說明一下它與jquery中的$(document).ready()的區別：
$(document).ready()是在DOM結構繪制完畢之后就執行內部的語句了，不用像window.onload一樣，需要等到全部元素都加載完畢才執行。