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. Servlet学习二——doGet和doPost

    1.get和post是http协议中的两种方法,还有其它,读写一般数据还能满足: 2.get只有一个流,参数附加在url后,且大小个数有严格限制,这个限制因浏览器而有所不同,get传递数据,实际上是将 ...

  2. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  3. Canvas 实现图片剪切

    用户上传头像然后截图的需求很常见,很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延.最近正好学习了HTML5里的canvas,发现它的图片处理功能比较强大,就打算用can ...

  4. cordova常用资料源

    cordova的中文资料https://github.com/CordovaCn/CordovaCn 官方文档: http://cordova.apache.org/docs/en/latest/ E ...

  5. 不谈业务运维的IT主管早晚被淘汰 这里是10条干货

    大数网 吴玉征 先说个真实的故事. 前一段时间,有一家知名的国际连锁咖啡公司的自助交易系统(支付宝.微信.ApplePAY)特别慢,工作人员也不知道为什么.由于他们刚上了业务运维,支持这套系统的云智慧 ...

  6. Sass开发环境搭建

    一.Ruby环境下Sass的安装      a.安装Ruby           1.下载rubyinstaller安装           2.命令行或者直接使用sass gem包安装Sass.   ...

  7. [2015hdu多校联赛补题]hdu5384 Danganronpa

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5384 题意:函数f(A, B)定义:A.B为字符串,f(A, B)为A中有多少个不同的B(ex:f(& ...

  8. 背包九讲 && 题目

    ★.背包求方案数的时候,多重背包是不行的,因为产生重复的背包会有多种情况. ★.背包记录路径的时候,其实是不行的,因为更新了12的最优解,如果它依赖于6这个背包,然后你后面改变了6这个背包,就GG 1 ...

  9. Android Studio插件整理

    摘录于习惯沉默的Blog  https://ydmmocoo.github.io/2016/06/28/Android-Studio%E6%8F%92%E4%BB%B6%E6%95%B4%E7%90% ...

  10. Session过期、失效时间

    Session一直是我们做web项目经常使用的,以前没太注意,这次又细致的看了下! 1.session其实就是一个Map,键=值对,通过session.getAttribute("name& ...