window.onload使用指南_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

window.onload使用指南_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:39 PM

网页中的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()函数

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

在JavaScript中替换字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答本文将探讨两种在JavaScript中替换字符串字符的方法：在JavaScript代码内部替换和在网页HTML内部替换。在JavaScript代码内部替换字符串最直接的方法是使用replace()方法： str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项，需使用正则表达式并添加全局标志g： str = str.replace(/fi

构建您自己的Ajax Web应用程序Mar 09, 2025 am 12:11 AM

因此，在这里，您准备好了解所有称为Ajax的东西。但是，到底是什么？ AJAX一词是指用于创建动态，交互式Web内容的一系列宽松的技术。 Ajax一词，最初由Jesse J创造

10个JQuery Fun and Games插件Mar 08, 2025 am 12:42 AM

10款趣味横生的jQuery游戏插件，让您的网站更具吸引力，提升用户粘性！虽然Flash仍然是开发休闲网页游戏的最佳软件，但jQuery也能创造出令人惊喜的效果，虽然无法与纯动作Flash游戏媲美，但在某些情况下，您也能在浏览器中获得意想不到的乐趣。 jQuery井字棋游戏游戏编程的“Hello world”，现在有了jQuery版本。源码 jQuery疯狂填词游戏这是一个填空游戏，由于不知道单词的上下文，可能会产生一些古怪的结果。源码 jQuery扫雷游戏

如何创建和发布自己的JavaScript库？Mar 18, 2025 pm 03:12 PM

文章讨论了创建，发布和维护JavaScript库，专注于计划，开发，测试，文档和促销策略。

jQuery视差教程 - 动画标题背景Mar 08, 2025 am 12:39 AM

本教程演示了如何使用jQuery创建迷人的视差背景效果。我们将构建一个带有分层图像的标题横幅，从而创造出令人惊叹的视觉深度。更新的插件可与JQuery 1.6.4及更高版本一起使用。下载

如何在浏览器中优化JavaScript代码以进行性能？Mar 18, 2025 pm 03:14 PM

本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。

使用jQuery和Ajax自动刷新DIV内容Mar 08, 2025 am 12:58 AM

本文演示了如何使用jQuery和ajax自动每5秒自动刷新DIV的内容。该示例从RSS提要中获取并显示了最新的博客文章以及最后的刷新时间戳。加载图像是选择

Matter.js入门：简介Mar 08, 2025 am 12:53 AM

Matter.js是一个用JavaScript编写的2D刚体物理引擎。此库可以帮助您轻松地在浏览器中模拟2D物理。它提供了许多功能，例如创建刚体并为其分配质量、面积或密度等物理属性的能力。您还可以模拟不同类型的碰撞和力，例如重力摩擦力。 Matter.js支持所有主流浏览器。此外，它也适用于移动设备，因为它可以检测触摸并具有响应能力。所有这些功能都使其值得您投入时间学习如何使用该引擎，因为这样您就可以轻松创建基于物理的2D游戏或模拟。在本教程中，我将介绍此库的基础知识，包括其安装和用法，并提供一

See all articles