window.onload使用指南
作者:hebedich 发布时间:2024-04-18 10:58:51
网页中的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()函数
猜你喜欢
- 目录1 键的类型,列表/字典不可以,其它都可以2 多个对象可当作键名,顺序不同时是不同的键3 结论【有误】:今天看别人代码时发现一个事,就是
- 基于Python实现对求解最长回文子串的动态规划算法,具体内容如下1、题目给定一个字符串 s,找到 s 中最长的回文子串。你可以假设 s 的
- 1983年1月19日,苹果公司发布乔布斯领导研制的新一代电脑Lisa,当时Lisa电脑的设计人员就认为,必须将立即执行的命令和需要用户附加输
- 本文实例讲述了Python简单获取自身外网IP的方法。分享给大家供大家参考,具体如下:#encoding=utf-8#author: wal
- 大多数网站维护都采用“多人协作,共同管理”方式。某个人负责一个(或者多个)栏目,他只能对他负责的栏目进
- 1.文件的读取和显示方法1: f=open(r'G:\2.txt') print f.read()&nb
- 我就废话不多说了,还是直接上代码吧! url = "http://%s:%s/api-token-auth/" % (i
- 很早前就遇到这个空值的属性,它既出现在 html 文档中,也出现在 xml 中,一直都回避,放之任之,反正也不影响文档的正确性。隐隐约约过了
- 前言本文主要给大家介绍了关于Mysql元数据生成Hive建表语句注释脚本的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的
- 注:以String类型为例一.导出redis某个库的数据import redisimport jsonfile_path = "w
- 本文实例讲述了Python实现的ftp服务器功能。分享给大家供大家参考,具体如下:python 具备强大的网络编程功能,而且代码简介,用简单
- 说明和代码如下:<%@ language = vbscript%><% 
- 定义: 何为触发器?在SQL Server里面也就是对某一个表的一定的操作,触发某种条件,从而执行的一段程序。触发器是一个特殊的存储过程。
- 要达到二级名的效果,必须一下条件以及流程:1、必须有一个顶级域名,而且此域名必须做好泛解析并做好指向。2、必须有一台属于你的独立的服务器。泛
- title: 利用Django实现一个能与用户交互的初级框架author: Sun-Winddate: September 1, 2021D
- 本文实例讲述了python类装饰器用法。分享给大家供大家参考。具体如下:#!coding=utf-8 registry = {} def r
- 如下所示:>>> import numpy as np>>> a = np.array([[1, 2,
- python下os模块强大的重命名方法renames详解 在python中有很多强大的模块,其中我们经常要使用的就是OS模块,OS
- 图像的全景拼接包括三大部分:特征点提取与匹配、图像配准、图像融合。1、基于SIFT的特征点的提取与匹配利用Sift提取图像的局部特征,在尺度
- 目录一、为什么要用线程池二、线程池练习演示例子1:使用submit方法演示例子2:使用map方法三、线上数据库测试总结:一、为什么要用线程池