window.onload()的加载问题
2016-07-13 19:26
351 查看
<script type="application/javascript">
window.onload = function(){
var obj = document.getElementById("btn");
function f(){
alert("show me");
}
}
</script>
<body>
<button id="btn" onclick="f()">click</button>
</body>
当函数f()放在window.onload()=function(){}内部的时候,点击按钮并不能够调用f()成功弹出对话框。并且控制台显示
Uncaught ReferenceError:f is not defined
也就是函数f()就没有被定义。
但是如果将function f()移到window.onload()=function(){}外部,也就是如下的时候,程序就能正常运行。
<script type="application/javascript">
window.onload = function(){
var obj = document.getElementById("btn");
}
function f(){
alert("show me");
}
</script>
分析一下:
首先,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一样,需要等到全部元素都加载完毕才执行。
window.onload = function(){
var obj = document.getElementById("btn");
function f(){
alert("show me");
}
}
</script>
<body>
<button id="btn" onclick="f()">click</button>
</body>
当函数f()放在window.onload()=function(){}内部的时候,点击按钮并不能够调用f()成功弹出对话框。并且控制台显示
Uncaught ReferenceError:f is not defined
也就是函数f()就没有被定义。
但是如果将function f()移到window.onload()=function(){}外部,也就是如下的时候,程序就能正常运行。
<script type="application/javascript">
window.onload = function(){
var obj = document.getElementById("btn");
}
function f(){
alert("show me");
}
</script>
分析一下:
首先,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一样,需要等到全部元素都加载完毕才执行。
相关文章推荐
- touch.js2
- 关于scanf()函数的一点理解
- Tutorial: Android Wear with Genymotion
- MySQL索引原理及慢查询优化 转载
- touch.js
- Java中注解&泛型
- WAV声音档转PCM
- UESTC 2016 Summer Training #3 Div.2(未完待续)
- java网络爬虫与mysql数据库(二)
- java基础知识回顾
- Android:创建可穿戴应用 - 建立模拟器和创建项目
- 回调函数
- nginx学习笔记
- Android 设置EditText的光标颜色和粗细
- swiper.js3
- JVM性能调优监控工具jps、jstack、jmap、jhat、jstat使用详解
- UE4学习笔记(六): 次世代的移动平台渲染技术
- WAV音乐档(二)
- bzoj 3725: PA2014 Final Matryca (贪心)
- swiper.js2