关于window.onload()的加载问题
今天写了个js的demo，遇到了个小问题，后来发现是自己对window.onload()的具体用处不是太清楚，现在跟大家分享一下。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>window_onload()</title>
<meta name="author" content="blck" />
<!-- Date: 2015-03-24 -->
<script type="application/javascript">
window.onload = function(){
var obj = document.getElementById("btn");
function f(){
alert("show me");
}
}
</script>
</head>
<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(){}外部，也就是如下的时候，程序就能正常运行。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>window_onload()</title>
<meta name="author" content="blck" />
<!-- Date: 2015-03-24 -->
<script type="application/javascript">
window.onload = function(){
var obj = document.getElementById("btn");
}
function f(){
alert("show me");
}
</script>
</head>
<body>
<button id="btn" onclick="f()">click</button>
</body>
为什么会这样呢？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一样，需要等到全部元素都加载完毕才执行。
关于window.onload()的加载问题的更多相关文章
- window.onload的加载和$(document).read()
1.执行时机: window.onload :必须等到网页中所有的内容加载完之后才执行. $(document).read():网页中所有的DOM结构执行完毕后.可能DOM元素并未加载完. 2.单个网 ...
- JavaScript向window onload添加加载函数
有时候我们需要在页面加载事件后完成一些函数操作,对于函数比较多的情况下可以写一个统一的加载函数 .本函数来自于JavaScript DOM 编程艺术: function addLoadEvent(fu ...
- html中defer和window.onload的加载顺序
结论:defer执行的顺序先于window.onload! 案例: html代码: <!DOCTYPE html> <html lang="en"> < ...
- 01第一个批处理文件 window开机自动加载批处理文件
1 批处理文件用来加载python程序 批处理的文件名称为:Hello.bat @echo off C: cd C:\Users\\Desktop\python\HelloWorld\HelloWo ...
- jquery的$(document).ready()和onload的加载顺序
最近在改一个嵌入在frame中的页面的时候,使用了jquery做效果,而页面本身也绑定了onload事件.改完后,Firefox下测试正常流畅,IE下就要等个十几秒jquery的效果才出现,黄花菜都凉 ...
- 搞清Image加载事件(onload)、加载状态(complete)后，实现图片的本地预览，并自适应于父元素内(完成)
onload与complete介绍 complete只是HTMLImageElement对象的一个属性,可以判断图片加载完成,不管图片是不是有缓存:而onload则是这个Image对象的load事件回 ...
- div滚动底部加载li,window滚动底部加载li
DIV固定高度滚动条滚动最底部,加载新的li <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...
- js 实现图片预加载 （js操作 Image对象属性complete ，事件onload 异步加载图片）
通过js操纵DOM很多情况下都是为了实现和当前页html元素的异步载入,我谈谈对Image对象的一些认识.看个例子:<input type="button" name=&qu ...
- Extjs打开window窗口自动加载html网页
Window inherits the autoLoad config option from Panel. Note that I included all config options below ...
随机推荐
- 【读书笔记】iOS-xib,点击事件的连接(三)
紧接着上一节来写 一,选中On按钮,同时按住Control键,连接到FirstViewController.h文件中. 会弹出如下对话框. 二,将Connection处选择为Action,同时将Nam ...
- Docker简单使用
镜像是一种轻量级.可执行的独立软件包,它包含运行某个软件所需的所有内容,包括代码.运行时.库.环境变量和配置文件. 容器是镜像的运行时实例 - 实际执行时镜像会在内存中变成什么.默认情况下,它完全独立 ...
- KVM虚拟化研究-1
使用qemu-img创建镜像 例子: [root@HOST31 rybtest]# qemu-img create -f raw /rybtest/test1.raw 1G 使用qemu-img查看镜 ...
- Linux 下修改网卡MAC地址
Linux下修改网卡MAC地址 by:授客 QQ:1033553122 例子:修改网卡接口eth0的mac地址 #停用网卡接口,比如eth0 # ifconfig eth0 down #编辑对应的网卡 ...
- 《Inside C#》笔记(十三) 多线程 下
一 任务调度 当一个线程的时间片被用尽后,处理器会切换到另一个线程,但关于如何确定执行哪一个线程呢,这就涉及到了线程或任务的优先级. a) 每个线程都有优先级,任务调度算法会根据各线程的不同优先级来决 ...
- 【Java入门提高篇】Day34 Java容器类详解（十五）WeakHashMap详解
源码详解系列均基于JDK8进行解析 说明 在Java容器详解系列文章的最后,介绍一个相对特殊的成员:WeakHashMap,从名字可以看出它是一个 Map.它的使用上跟HashMap并没有什么区别,所 ...
- springcloud 入门 8 （config配置中心）
Spring Cloud Config: 配置中心为了方便服务配置文件统一管理,实时更新,所以需要分布式配置中心组件,它就是Spring Cloud Config. 在分布式系统中,由于服务数量巨多, ...
- (网页)angularjs中的验证input输入框只能输入数字和小数点
百度的资料:自己记录看下 把js的验证方法改成angular可使用的方法 AngularJS文件的写法: $scope.clearNoNum = function(obj,attr){ //先把非数字 ...
- linux 下的ssh
ssh服务 1.检查是否有被安装,命令 rpm -qa|grep "ssh" 2.检查ssh有没有在运行,命令 rpm -qa|grep "ssh" 3.如何启 ...
- 使用Anemometer基于pt-query-digest将MySQL慢查询可视化
最近玩MySQL,发现了一个很不错的工具,可以把MySQL慢查询可视化,方便我们去找出和分析慢询语句,搭建的步骤不多,但网上详细教程比较少,说得也不够详细,一不小心,估计得蛋痛一会,哈哈 Percon ...