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. [译]Node.js - Event Loop

    介绍 在读这篇博客之前,我强列建议先阅读我的前两篇文章: Getting Started With Node.js Node.js - Modules 在这篇文章中,我们将学习 Node.js 中的事 ...

  2. 【软件工程】“谁是卧底”之NABC分析

    结对编程结束之后,迎来了结队编程,经过了很长时间的思考,想到了“谁是卧底”的idea,以下是该游戏的NABC分析: N(need): 即需求,近期,内地一知名综艺节目将“谁是卧底”游戏推广到年轻人中, ...

  3. 改变Eclipse 中代码字体大小

    1.改变eclipse 中代码字体大小,就是我打进去的java文件的字体大小 wiondow--preferences--general--appearance--colors and fonts-- ...

  4. <一>Angular.js学习

    angular.module(name, [a], [b]);  // angular.module()创建.获取.注册angular中的模块 name:字符串类型,代表模块的名称: a:字符串的数组 ...

  5. 表有主外键约束时的delete 方法 2008

    --1.禁用约束 ALTER TABLE abppmgr.MST_ITEMMASTER disable CONSTRAINT C0248833319_7676; --2.删除数据 truncate t ...

  6. java实现简单的验证码(待增强)

    package com.xxx; import java.awt.Color;import java.awt.Font;import java.awt.Graphics2D;import java.a ...

  7. C# DataGridView控件清空数据完美解决方法

    C# DataGridView控件绑定数据后清空数据在清除DataGridview的数据时: 1.DataSource为NULL(DataGridView.DataSource= null;)这样会将 ...

  8. iOS中的上传、下载流程心得

    访问相册 1.  判断资源库是否有效 2.  创建imagePickerController 设置代理 弹出视图控制器 3.  实现协议方法 > iOS10 访问系统相册需要在info.plis ...

  9. 【转】MySQL连接超时断开的问题

      这遍文章转过来做个笔记,时不时看看. 转:http://blog.csdn.net/nethibernate/article/details/6658855 Exception如下: org.hi ...

  10. 关于display:flex

    遇到了一个bug 就是display:flex   遇到的bug原型就是,项目容器的diaplay:flex ,一行项目五个,到最后一行只剩两个的时候 是两端对齐的,如果再添加的话 也就是两端各一个子 ...