window.onload使用指南


Posted in Javascript onSeptember 13, 2015

网页中的javascript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式:

一.将脚本代码放在网页的低端,这样在运行脚本代码的时候,可以确保要操作的对象已经加载完成。
二.通过window.onload来执行脚本代码。

第一种方式感觉比较凌乱(其实推荐使用),往往我们需要将脚本代码放在一个更为合适的地方,那么window.onload方式就是一个更好的选择。window.onload是一个事件,当文档加载完成之后就会触发该事件,可以为此事件注册事件处理函数,并将要执行的脚本代码放在事件处理函数中,于是就可以避免获取不到对象的情况。先看一段代码实例:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<title>window.onload用法</title>
<style type="text/css">
#bg{
 width:100px;
 height:100px;
 border:2px solid red;
}
</style>
<script type="text/javascript">
document.getElementById("bg").style.backgroundColor="#F90";
</script>
</head>
<body>
 <div id="bg"></div>
</body>
</html>

以上代码的初衷是向将div的背景颜色设置为#F90,但是并没有实现此效果,这是因为代码是顺序执行的,当执行到document.getElementById("#bg").style.backgroundColor="#F90"这一句的时候,还没有加载到此div对象,所以设置也就不能够成功。代码修改如下:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<title>位置高度div垂直居中</title>
<style type="text/css">
#bg{
 width:100px;
 height:100px;
 border:2px solid red;
}
</style>
<script type="text/javascript">
window.onload=function(){
 document.getElementById("bg").style.backgroundColor="#F90";
}
</script>
</head>
<body>
 <div id="bg"></div>
</body>
</html>

原因就是讲设置背景颜色的代码放置在window.onload的事件处理函数中,只有当文档加载完成后,才会执行事件处理函数,也才会执行设置背景颜色的脚本代码。

事件处理函数绑定:

方式一:

window.onload=function(){},在以上代码中就是使用此种方式为window.onload事件绑定事件处理函数,这里绑定的是一个匿名函数,当然也可以绑定非匿名函数,代码实例如下:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<title>window.onload用法详解</title>
<script type="text/javascript">
window.onload=function myalert()
{
");
}
</script>
</head>
<body>

</body>
</html>

以上代码可以将为名myalert方法绑定到window.onload事件上,但是不能以以下方式为此事件绑定多个事件处理函数:

window.onload=function a(){}
window.onload=function b(){}

以上代码并不能为window.onload事件绑定多个事件处理函数,而是最后一个会覆盖前面的所有函数。不过代码可以变通一下:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<title>window.onload用法</title>
<style type="text/css">
#bg{
 width:100px;
 height:100px;
 border:2px solid red;
}
</style>
<script type="text/javascript">
window.onload=function(){
 function a(){
  document.getElementById("bg").style.backgroundColor="#F90";
 }
 function b(){
  document.getElementById("bg").style.width="200px";
 }
 a();
 b();
}
</script>
</head>
<body>
 <div id="bg"></div>
</body>
</html>

以上代码实现了绑定多个事件处理函数同样的效果。

方式二:

可以使用addEventListener()和attachEvent()为onload事件绑定事件处理函数,下面分别介绍一下:
addEventListener()是当前标准的一种事件处理函数绑定方式,但是IE8和IE8以下的浏览器并不支持此方式,实例如下:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<title>window.onload用法</title>
<style type="text/css">
#bg{
 width:100px;
 height:100px;
 border:2px solid red;
}
</style>
<script type="text/javascript">
window.addEventListener("load",bg,false);
window.addEventListener("load",changeW,false);
function bg(){
 document.getElementById("bg").style.backgroundColor="#F90";
}
function changeW(){
 document.getElementById("bg").style.width="200px";
}
</script>
</head>
<body>
 <div id="bg"></div>
</body>
</html>

以上代码可以为window.onload事件绑定多个事件处理函数。简单介绍一下语法格式:

addEventListener("type",函数名,false)

addEventListener()函数具有三个参数,第一个参数事件类型,需要注意的是,事件类型名称前面不能有on,例如window.onload事件,在这个地方只能写作load,第二个参数是要绑定的函数名称,第三个参数一般为false。
使用attachEvent()函数绑定事件处理函数:
IE9之前的的IE浏览器不支持addEventListener()函数,所以attachEvent()函数就有了用武之地了,代码实例如下:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<title>window.onload用法</title>
<style type="text/css">
#bg{
 width:100px;
 height:100px;
 border:2px solid red;
}
</style>
<script type="text/javascript">
window.attachEvent("onload",bg);
window.attachEvent("onload",changeW);
function bg(){
 document.getElementById("bg").style.backgroundColor="#F90";
}
function changeW(){
 document.getElementById("bg").style.width="200px";
}
</script>
</head>
<body>
 <div id="bg"></div>
</body>
</html>

以上代码的效果和使用addEventListener()函数的效果是一样的,简单介绍一下语法格式:

addEventListener("type",函数名)

此函数只有两个参数,第一个参数是事件类型,不过它和addEventListener()的第一个参数的作用是一样,但是名称有所区别,名称前面是具有"on",第二个参数就是要绑定的事件处理函数名称。为了兼容各浏览器,需要将以上代码进行改造,实例如下:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  

<title>window.onload用法</title>
<style type="text/css">
#bg{
 width:100px;
 height:100px;
 border:2px solid red;
}
</style>
<script type="text/javascript">
if(window.addEventListener){
 window.addEventListener("load",bg,false);
 window.addEventListener("load",changeW,false);
}
else{
 window.attachEvent("onload",bg);
 window.attachEvent("onload",changeW);
}

function bg(){
 document.getElementById("bg").style.backgroundColor="#F90";
}
function changeW(){
 document.getElementById("bg").style.width="200px";
}
</script>
</head>
<body>
 <div id="bg"></div>
</body>
</html>

以上代码代码解决了各大浏览器的兼容性问题。在上面代码中使用以下代码进行判断:

if(object.addEventListener){
 object.addEventListener();
}
else{
 object.attachEvent();
}

通过if语句判断对象是否具有addEventListener属性,如果有这使用addEventListener()函数,否则使用attachEvent()函数

Javascript 相关文章推荐
传智播客学习之JavaScript基础篇
Nov 13 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
简单的Vue异步组件实例Demo
Dec 27 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 #Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
Sep 12 #Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 #Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 #Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 #Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 #Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 #Javascript
You might like
PHP4实际应用经验篇(8)
2006/10/09 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
php中关于换行的实例写法
2019/09/26 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
JavaScript常用工具函数汇总(浏览器环境)
2020/09/17 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
Python运算符重载用法实例分析
2015/06/01 Python
python中int与str互转方法
2018/07/02 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
介绍一下Linux文件的记录形式
2012/04/18 面试题
UNIX文件系统常用命令
2012/05/25 面试题
工厂保洁员岗位职责
2013/12/04 职场文书
期末自我鉴定
2014/02/02 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
法律进社区活动总结
2015/05/07 职场文书
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server