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. c# 的MD5加密算法

    发现用C#封装好的内部类实现MD5加密和其它语言的MD5加密结果有时会不一样,暂时发现没有特殊字符时的结果是一样的,一旦有特殊字符(09404719290010210‹»×úÛ±8*«À‡7œ–201 ...

  2. FIleText转换为JSONObject对象

    package com.beijxing.TestMain; import java.io.File; import java.io.IOException; import org.apache.co ...

  3. ubuntu 下搭建nginx

    1.安装nginx sudo apt-get install nginx 2.nginx 的启动和关闭启动 nginx:# nginx -c /etc/nginx/nginx.conf 3.关闭 ng ...

  4. java 线性规划 和lingo 比较

    model:max=13*A+ 23*B; 5*A + 15*B <480 ; 4*A + 4 *B <160 ; 35* A + 20 *B <1190 ; end Variabl ...

  5. python之路——面向对象（进阶篇）

    面向对象进阶:类成员.类成员的修饰符.类的特殊成员 类成员 类成员分为三大类:字段.方法.属性 一.字段 静态字段 (属于类) 普通字段(属于对象) class City: # 静态字段 countr ...

  6. 第15章 .NET中的反射

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.R ...

  7. js面向对象编程：if中可以使用那些作为判断条件呢？

    作者来源http://www.2cto.com/kf/201407/314978.html搬运 在所有编程语言中if是最长用的判断之一,但在js中到底哪些东西可以在if中式作为判断表达式呢? 例如如何 ...

  8. FileReader对象

    在一些项目中,经常会遇到图片上传的情况,为了提高用户体验,一般会要求选择图片后 能预览一下图片. 以前的做法是 通过 ajax上传图片后,然后再显示出来,这样会产生大量的无用的图片文件,在HTML5的 ...

  9. 转一下大牛的嵌入web页播放视频方法（转）

    来自:http://www.cnblogs.com/bandry/archive/2006/10/11/526229.html 在Web页中嵌入Media Player的方法比较简单,只要用HTML中 ...

  10. Form表单(回车)提交问题

    我们有时候希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此.比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键 ...