window.onload

 

<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一样,需要等到全部元素都加载完毕才执行。

posted @ 2017-12-14 10:00  伊优  阅读(3773)  评论(0编辑  收藏  举报