window.onload用法详解
网页中的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>
以上代码实现了将div背景颜色设置为#F90的目的。原因就是讲设置背景颜色的代码放置在window.onload的事件处理函数中,只有当文档加载完成后,才会执行事件处理函数,也才会执行设置背景颜色的脚本代码。
事件处理函数绑定:
方式一:
window.οnlοad=function(){},在以上代码中就是使用此种方式为window.onload事件绑定事件处理函数,这里绑定的是一个匿名函数,当然也可以绑定非匿名函数,代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>window.onload用法详解</title>
<script type="text/javascript">
window.onload=function myalert()
{alert("绑定成功!");
}
</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()函数。
window.onload用法详解相关推荐
- linux 弹出窗口,实现弹出窗口的window.open用法详解(js代码)
实现弹出窗口的window.open用法详解(js代码) [1.最基本的弹出窗口代码] 其实代码非常简单: 因为这是一段javascripts代码,所以它们应该放在 cript">标签 ...
- JS中window.onload事件详解
window.onload出现的原因? 我们都知道页面的代码顺序是从上往下进行加载,很多时候我们要对页面中的某一个模块进行操作,这时候我们常常使用javascript代码来进行操作.为了能够保证操作 ...
- Extjs Window用法详解 3 打印具体应用,是否关掉打印预览的界面
Extjs Window用法详解 3 打印具体应用,是否关掉打印预览的界面 Extjs 中的按钮元素 { xtype: 'buttongroup', title: '打印', items: [ me. ...
- LayoutInflater的inflate函数用法详解
LayoutInflater的inflate函数用法详解 LayoutInflater作用是将layout的xml布局文件实例化为View类对象. 获取LayoutInflater的方法有如下三种: ...
- js数组中foEach和map的用法详解 jq中的$.each和$.map
数组中foEach和map的用法详解 相同点: 1.都是循环遍历数组(仅仅是数组)中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项value, ...
- selenium用法详解
selenium用法详解 selenium主要是用来做自动化测试,支持多种浏览器,爬虫中主要用来解决JavaScript渲染问题. 模拟浏览器进行网页加载,当requests,urllib无法正常获取 ...
- bulk of the 用法_代词的用法详解:第三部分(不定代词)
1. 用some还是用any 1) 一般说来,some用于肯定;any用于否定,例如: There are some letters for you. There aren't any letters ...
- ES6 — Promise基础用法详解(resolve、reject、then、catch,all,)
ES6 - Promise基础用法详解 Promise 是一个构造函数,它自身拥有all.reject.resolve这几个眼熟的方法, 原型上有then.catch等同样熟悉的方法. 所以,在开始一 ...
- eval 函数 java_[Java教程]eval()函数用法详解
[Java教程]eval()函数用法详解 0 2015-12-14 11:00:26 eval()函数用法详解: 此函数可能使用的频率并不是太高,但是在某些情况下具有很大的作用,下面就介绍一下eval ...
最新文章
- 修复“-bash: locate: command not found”
- OSPF:MTU不一致导致的邻接关系问题
- centos7-yum安装与卸载
- 人人都是产品经理 2
- 水下机器人_相关知识点
- Java:log4j:WARN no appenders could be found for logger问题解决
- java三层架构是不是策略模式,把「策略模式」应用到实际项目中
- c语言万年历查询程序代码,C语言 万年历程序(示例代码)
- 微型计算机物理地址转换,微型计算机及接口技术2015年4月真题试题(04732)
- 什么是javax.ws.rs.core.context? [第4部分]
- AIO系列文档(1)----图解ByteBuffer
- 6.MongoDB之索引
- 66岁比尔盖茨突然宣布离婚!27年前与下属恋爱修成正果,现在“无法共同成长”,分割8000亿财产...
- PDF控件PDF Creator V5.5.2.3发布 | 支持插入PDF417条形码
- cad怎样弄出放线的坐标_利用CAD绘制全站仪放线用的坐标点
- Elasticsearch实战 | 必要的时候,还得空间换时间!
- 使用阿里巴巴的iconfont图片库(下载到本地)
- 25个 Vue 技巧,开发了5年了,有些竟然还是第一次见!
- 不止终端热闹,CES 2016上半导体厂商有哪些新动作?---ESM
- django-filer中文汉化无效的解决方案