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>

javascript中onload事件如何绑定及执行顺序的更多相关文章

  1. JavaScript 中 onload 事件绑定多个方法的优化建议

    页面加载完毕时会触发 onload 事件.基于内容(HTML)要与行为(JavaScript)分离的编码思想,我们需要将一些对页面的初始化操作写在方法内,并通过window.onload = func ...

  2. JavaScript 中 onload 事件绑定多个方法

    当需要调用的方法较多时,我们可以进一步优化,编写一个专门用于绑定 onload事件的方法: function addLoadEvent(func) { //把现有的 window.onload 事件处 ...

  3. JavaScript 中 OnLoad事件用法总结

    还差一天现在手头上的这套网站就写完了,中午蹭了半天还是没睡好,干脆爬起来把今天上午写到的onload事件给整理一下. 一般用到比较多的就是初始化数据或者效果. 1.直接写在<body>标签 ...

  4. js实例分析JavaScript中的事件委托和事件绑定

    我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...

  5. javascript 中的事件机制

    1.javascript中的事件. 事件流 javascript中的事件是以一种流的形式存在的. 一个事件会也有多个元素同时响应. 有时候这不是我们想要的效果, 我们只是需要某个特定的元素相应我们的绑 ...

  6. 了解javascript中的事件(二)

    本文目录如下: 零.寒暄 一.事件的分类 二.事件代理 2.1 问题引出 2.2 什么是事件代理 2.3 完整示例 二.事件代理 三.事件代理思想的用处 四.总结 零.寒暄 这篇博客本该出现在两个月以 ...

  7. java基础66 JavaScript中的事件、localtion对象、screen对象(网页知识)

    1.JavaScript中的事件注册 1.1.事件的注册方式 方式1:直接在html元素上注册 <body onLoad="ready()"></body > ...

  8. JavaScript中的事件委托机制跟深浅拷贝

    今天聊下JavaScript中的事件委托跟深浅拷贝 事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()&qu ...

  9. Javascript中常用事件集合和事件使用方法

    Javascript中常用事件集合和事件使用方法 一.事件绑定 格式: 事件源 . on事件类型=事件处理函数 事件绑定三要素 1.事件源:和谁绑定 2.事件类型:什么事件 3.事件处理函数:触发了要 ...

随机推荐

  1. sga_target大于sga_max_size数据库无法启动

    环境:oracle 11g 单机 操作过程:由于修改SGA的大小,只修sga_max_size,没有修改sga_target,改导sga_max_size大于sga_target的大小,使得数据库无法 ...

  2. yum阿里云镜像源

    阿里云是最近新出的一个镜像源.得益与阿里云的高速发展,这么大的需求,肯定会推出自己的镜像源.阿里云Linux安装镜像源地址:http://mirrors.aliyun.com/ CentOS系统更换软 ...

  3. [原创.数据可视化系列之三]使用Ol3加载大量点数据

    不管是百度地图还是高德地图,都很难得见到在地图上加载大量点要素,比如同屏1000的,因为这样客户端性能会很低,尤其是IE系列的浏览器,简直是卡的要死.但有的时候,还真的需要,比如,我要加载全球的AQI ...

  4. thinkphp 验证

    //YongHuModel.class.php namespace Home\Model; use Think\Model; class YongHuModel exstends Model { pr ...

  5. Iterator(迭代器)-对象行为型模式

    1.意图 提供一种方法顺序访问一个聚合对象中的各个元素,而又不暴露该对象的内部表示. 2.别名 Cursor-游标. 3.动机 一个聚合对象,应该提供一种方法来让别人可以访问它的元素,而又不需暴露它的 ...

  6. python 循环嵌套

    需求如下: 1. #定义商品列表类 # def shangpin_list(): # for i in com_list: # print(com_list.index(i),end=" & ...

  7. 查询AD账号的SID

    在非域控的计算机上可以查询所用AD用户的SID,不过现成的工具不能直接实现此目的,我们需要在这些计算机上安装RSAT(远程服务器管理工具),然后使用dsquery和dsget命令,来快速查询AD用户的 ...

  8. js中的一些容易混淆的方法!

    数组的一些方法: 1.join()和split()方法  与之相反的是split()方法:用于把一个字符串分割成字符串数组.  注意返回的数组中不包括separator本身: 提示和注释注释:如果把空 ...

  9. generator class 的含义

    native有天生的,本土的,也就是说生来就有的, 那也就是说自动生成,不需要人工来帮忙或者管控的. 而assigned是指指定的,分配的, 如果你不赋予他甚麼东西,那麼他是不能实现的. 需要人工,自 ...

  10. JS-数组冒泡排序

    数组冒泡就是每次从数组里取出两个数,然后比较大小,然后在排序. 正序排列 var arr = [8,2,5,12,14,19,1,6];      for(var i = 0;i < arr.l ...