今天写了个js的demo，遇到了个小问题，后来发现是自己对window.onload()的具体用处不是太清楚，现在跟大家分享一下。

  1.         <head>
  2. 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. 		<title>window_onload()</title>
  4. 		<meta name="author" content="blck" />
  5. 		<!-- Date: 2015-03-24 -->
  6. 		<script type="application/javascript">
  7. 			window.onload = function(){
  8. 				var obj = document.getElementById("btn");
  9. 				function f(){
  10. 					alert("show me");
  11. 				}
  12. 			}
  13. 		</script>
  14. 	</head>
  15. 	<body>
  16. 		<button id="btn" onclick="f()">click</button>
  17. 	</body>

当函数f()放在window.onload()=function(){}内部的时候，点击按钮并不能够调用f()成功弹出对话框。并且控制台显示

Uncaught ReferenceError:f is not defined

也就是函数f()就没有被定义。

但是如果将function f()移到window.onload()=function(){}外部，也就是如下的时候，程序就能正常运行。

  1.          <head>
  2. 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. 		<title>window_onload()</title>
  4. 		<meta name="author" content="blck" />
  5. 		<!-- Date: 2015-03-24 -->
  6. 		<script type="application/javascript">
  7. 			window.onload = function(){
  8. 				var obj = document.getElementById("btn");
  9. 			}
  10. 			function f(){
  11. 				alert("show me");
  12. 			}
  13. 		</script>
  14. 	</head>
  15. 	<body>
  16. 		<button id="btn" onclick="f()">click</button>
  17. 	</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()的加载问题的更多相关文章

  1. window.onload的加载和$(document).read()

    1.执行时机: window.onload :必须等到网页中所有的内容加载完之后才执行. $(document).read():网页中所有的DOM结构执行完毕后.可能DOM元素并未加载完. 2.单个网 ...

  2. JavaScript向window onload添加加载函数

    有时候我们需要在页面加载事件后完成一些函数操作,对于函数比较多的情况下可以写一个统一的加载函数 .本函数来自于JavaScript DOM 编程艺术: function addLoadEvent(fu ...

  3. html中defer和window.onload的加载顺序

    结论:defer执行的顺序先于window.onload! 案例: html代码: <!DOCTYPE html> <html lang="en"> < ...

  4. 01第一个批处理文件 window开机自动加载批处理文件

    1 批处理文件用来加载python程序  批处理的文件名称为:Hello.bat @echo off C: cd C:\Users\\Desktop\python\HelloWorld\HelloWo ...

  5. jquery的$(document).ready()和onload的加载顺序

    最近在改一个嵌入在frame中的页面的时候,使用了jquery做效果,而页面本身也绑定了onload事件.改完后,Firefox下测试正常流畅,IE下就要等个十几秒jquery的效果才出现,黄花菜都凉 ...

  6. 搞清Image加载事件(onload)、加载状态(complete)后，实现图片的本地预览，并自适应于父元素内(完成)

    onload与complete介绍 complete只是HTMLImageElement对象的一个属性,可以判断图片加载完成,不管图片是不是有缓存:而onload则是这个Image对象的load事件回 ...

  7. div滚动底部加载li,window滚动底部加载li

    DIV固定高度滚动条滚动最底部,加载新的li <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  8. js 实现图片预加载 （js操作 Image对象属性complete ，事件onload 异步加载图片）

    通过js操纵DOM很多情况下都是为了实现和当前页html元素的异步载入,我谈谈对Image对象的一些认识.看个例子:<input type="button" name=&qu ...

  9. Extjs打开window窗口自动加载html网页

    Window inherits the autoLoad config option from Panel. Note that I included all config options below ...

随机推荐

  1. 关于scanf与cin哪个快的问题

    一开始入c++的时候成天跑cin,cout 直到有一天用cin,cout超时 才知道scanf比cin快的多 但是后来又听说加了ios::sync_with_stdio(false);的cin跟飞一样 ...

  2. 微信小程序踩过的一些坑

    前言 迄今为止,正儿八经的上线了真正意义上的程序,但是这个小程序却着实不小. 之所以不小,是因为这个类似于社区的小程序,已经做了大部分都有的功能了 举例说明,具体的一些功能点: 1.帖子列表页面:会有 ...

  3. Gitlab--安装及汉化

    简介 gitlab是一个利用 Ruby on Rails 开发的开源应用程序,实现一个自托管的Git 项目仓库,可通过Web界面迚行访问公开的戒者私人项目.Ruby on Rails 是一个可以使你开 ...

  4. Angular基础(七) HTTP & Routing

    ​ 一.HTTP a)Angular提供了自己的HTTP库来调用外部API,为了能够在等待API响应的过程中继续与界面交互,采用异步HTTP请求的方式. b)Get请求,首先导入Http, Respo ...

  5. angularjs的$http请求方式

    /*$http常用的几个参数 $http服务的设置对象: 1.method 字符串 表示发送的请求类型 get post jsonp等等 2.url 字符串 绝对或者相对的URL,请求的目标 3.pa ...

  6. 配置Synwrite作为Python的IDE

    先建立批处理 建立SynPython.bat ::Synwrite call Python to compile file ::Set Path @ set PATH=H:\XPprogram\Cod ...

  7. python学习第一周（1）

    备注:一般规范代码,可以操作code-reformat code 1. #!/usr/bin/env python 脚本语言第一行 作用:文件中代码用指定可执行程序运行,在unix类的操作系统才有意义 ...

  8. linux中使用nfs共享文件

    NFS需要使用远程过程调用 (RPC),也就是说,我们并不是只要启动NFS, 还需要启动RPC这个服务 服务器端 CentOS 7.4 ip:172.16.0.1 共享/tmp目录 共享/data目录 ...

  9. Django 知识总结（一）

    Django已经学过的知识点: 1. Urls.py 路由系统: 正则 分组匹配 --> 位置参数 分组命名匹配 --> 关键字参数 分级路由 include 给路由起别名 name=&q ...

  10. JQuery实战中遇到的两个小问题$(document).ready() 、bind函数的参数传递问题

    一.$(document).ready() 与 window.onload的区别 1.执行时间 window.onload 必须等到页面内所有元素(包括图片 css js等)加载完毕后才会执行. $( ...