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()函数
0
投稿猜你喜欢
- 在应用系统中,尤其在联机事务处理系统中,对数据查询及处理速度已成为衡量应用系统成败的标准。而采用索引来加快数据处理速度也成为广大数据库用户所
准备工作右击新建的项目，选择Python File，新建一个Python文件，然后在开头import cv2导入cv2库，import nu- /** * 类说明：对MYSQL数据库的操作类 */ using System; using System.Data; using MySq
- 在IE中，在使用checkbox或radio时，你会发现有时不能通过CheckBoxObject.checked = true或CheckB
- 一、Oracle 下载注意Oracle分成两个文件，下载完后，将两个文件解压到同一目录下即可。 路径名称中，最好不要出现中文，也不要出现空格
- 在VBScript中有Filter这个函数可以用来对数组进行过滤，并返回原数组的一个子集数组。语法说明： 引用内容Filter 函
- mysql 5.5 安装配置方法图文教程回忆一下mysql 5.5 安装配置方法，整理mysql 5.5 安装配置教程笔记，分享给大家。My
- if (arr[i]){ &nb
- 静态方法不需要所在类被实例化就可以直接使用。静态方法效率上要比实例化高，静态方法的缺点是不自动进行销毁，而实例化的则可以做销毁。静态方法和静
- 前言本文主要给大家介绍了关于Golang中数据结构Queue实现的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。
- 安装模块下面需要用模块，先安装一下：pip install numpy pip install opencv-python==4.5.5.6
- 只有mdf文件的数据库附加失败的修复 附加时报如下错误： 服务器: 消息 1813，级别 16，状态 2，行 1 未能打开新数据库 '
- 1.场景问题说明mysql中一般的update写法支持的方式是,update 表 set 字段名=修改后的字段值 where 条件1 and
- 利用Object.defineProperty进行数据劫持代码如下<!DOCTYPE html><html lang=&q
- 在项目里碰到需要把类似'450000'的数字转换为会计记账所用的格式，'450,000.00'，分隔千分位和
- 本文实例讲述了Python实现扩展内置类型的方法。分享给大家供大家参考，具体如下：简介除了实现新的类型的对象方式外，有时我们也可以通过扩展P
- 一、写在前面本文基于64位windows系统(鼠标右键点击桌面“此电脑”图标——属性可查看电脑系统版本）、python3.x(pycharm
- 实这本是说明一个问题 ： 每个人在提高自己能力这件事情上， 需要持续不断地努力。以最典型的例子来看，只有通过学习，程序员才能保证不断进步。
- 字符串操作字符串 + 运算符+运算符用于连接字符串，返回一个由连接在一起的操作数组成的字符串。>>> s = 'a
- <form name="frm"><select name=school onchange="
