关于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 ...
随机推荐
- MAC下搭建个人博客
安装homebrew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/inst ...
- InheritParasitic.js
// 寄生式继承 // 其基本思路是类似创建对象时的工厂模式,将继承过程封装在一个函数里,然后返回一个对象 function createObject(o){ var clone = Object.c ...
- CSS效果：CSS select样式优化 含jquery代码
CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...
- 每篇半小时1天入门MongoDB——1. MongoDB介绍和安装
目录:ASP.NET MVC企业级实战目录 MongoDB简介 MongoDB是一个高性能,开源,无模式的文档型数据库,是当前NoSql数据库中比较热门的一种.它在许多场景下可用于替代传统的关系型数据 ...
- 【转】MySQL：日期函数、时间函数总结（MySQL 5.X）
转自:http://www.cnblogs.com/she27/articles/1377089.html 一.MySQL 获得当前日期时间 函数1.1 获得当前日期+时间(date + time)函 ...
- MVP模式及性能优化
1.base BaseActivity public abstract class BaseActivity<V,P extends BasePresenter<V>>exte ...
- 11-OpenLDAP主从同步
OpenLDAP主从同步 阅读视图 部署环境 OpenLDAP服务器初始化 配置主服务器同步策略 配置从服务器 OpenLDAP主从同步验证 故障诊断 1. 部署环境 本文以两台服务器为蓝本演示其同步 ...
- SqlServer索引页损坏恢复
问题背景 运维操作失误,在没有正常关闭sqlserver的情况下,将服务器关闭了,重启后某些表损坏(应该是某些页损坏了,没有损坏的页还能访问到数据,但是访问损坏了的页就有问题),目前数据库只有4.20 ...
- check
private int AddNewstoDB(NewsModels newsModels, string dateTimeStr, string jsonStr, string cid, strin ...
- JavaWeb后台购物车类的具体实现
相信大家肯定都在电商网站买过东西,当我们看中一件喜欢又想买的东西时,这时候你又不想这么快结账,这时候你就可以放入购物车: 就像我们平时去超市买东西一样,会推着购物车去买东西: 那么我们接下来看看jav ...