张贤健 安师大张贤健
张贤健的个人网站

javascript中onload事件如何绑定及执行顺序

onload事件,顾名思义就是为了js程序能够在网页加载成功过后进行执行。对于放在head里面的js来说,非常必要。

如何给网页绑定onload,主要有三种方式:

window.onload=function(){//要执行的代码}

window.addEventListener('load',函数名,false)

body中添加属性<body onload="函数名()"> 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>绑定onload几种方法</title>
<script>
alert('我最先被执行');
//这种方法仅能在页面加载后执行一个函数(其他函数通过该函数调用)
window.onload=function(){alert(document.getElementById('e').getAttribute('id'));}
</script>
<script>
if(document.all)//在IE中返回真
    window.attachEvent('onload',add);//IE浏览器用这个方法
else
    window.addEventListener('load',add,false);//其他浏览器用这个方法
if(document.all)//在非IE中返回假
    window.attachEvent('onload',jian);
else
    window.addEventListener('load',jian,false);//addEventListener方法给load事件绑定函数
function add(){alert('1+2的值为3!');}
function jian(){alert('3-2的值为1!');}
function cheng(){alert('3*5的值为15!');}//这个函数是通过行间调用的
</script>
</head>
<body onload="cheng();"><!--经过测试,IE中,body里面的onload会在其他load之前执行,并且,
会覆盖window.onload方法,使其不能执行;-->
<span id="e">hehe</span>
<script>
if(document.all)//在IE中返回真
    window.attachEvent('onload',last);//IE浏览器用这个方法
else
    window.addEventListener('load',last,false);//其他浏览器用这个方法
function last(){alert('我最后被执行!!!');}
</script>
</body>
</html>

 

posted @ 2016-04-19 17:37  张贤健  阅读(1840)  评论(0编辑  收藏  举报