为了理解2个事件的异同,先了解一下HTML文档加载顺序

HTML DOM文档加载步骤

HTML DOM文档加载是按顺序执行的,这与浏览器的渲染方式有关,一般浏览器渲染操作的顺序大致按如下几个步骤

1, 解析HTML结构

2,加载外部脚本和样式表文件

3,解析并执行脚本代码

4,构造HTML DOM模型

5,加载图片等外部文件

6,页面加载完毕

执行时机

  load 事件必须等到页面中所有内容全部加载完毕之后,才被执行,如果一个页面中包含了大数据的多媒体文件,则就会出现页面文档已经呈现出来,二由于网页数据还没有完全加载完毕,导致load事件不能够即使被触发。使得网页呈现和脚本初始化配置不能保存同步,从而影响了页面的可用性。

  而jQuery的ready是在DOM结构绘制完毕之后就执行,也就是说它先于外部文件的加载就被执行了,这样就能确保文档的呈现和脚本初始化保持同步。

  总之,ready事件先于Load事件被激活,如果网页文档中没有加载外部文件,则他们的响应时间基本上是相同的。

编写个数

  JavaScript的load事件只能够被编写一次,下面的写法是不允许的,此时他仅仅能够影响最后一次指定的事件处理函数,

  

<script type = 'text/javascript'>
window.onload = function(){
alert('页面初始化1');
}
window.onload = function(){
alert('页面初始化2');
}
window.onload = function(){
alert('页面初始化3');
}
</script>

如果希望这3个事件处理函数中的代码都被执行,则应该吧他们包含在一个处理函数中。

<script type = 'text/javascript'>
var f1 = function() {
alert("页面初始化1");
}
var f2 = function() {
alert("页面初始化2");
}
var f3 = function() {
alert("页面初始化3");
}
window.onload = function(){
f1();
f2();
f3();
} </script>

而对于JQuery 的ready事件类型来说,我们可以在同一个文档中多次定义,例如

<script src = "jquery.1.8.2.js" type = "text/javascript"> </script>
<script type = "text/javascript">
$(function() {
alert("页面初始化1");
});
$(function() {
alert("页面初始化2");
});
$(function() {
alert("页面初始化3");
});
</script>

这对于复杂页面中多次配置初始化程序非常重要,这样方便了用户根骨需要进行设计

  

参考自《jquery开发完全技术宝典》

jQuery 的ready事件和 JavaScript 的load事件对比的更多相关文章

  1. jQuery中ready与load事件的区别

    1.摘要 大家在编程中使用jQuery还有JS的时候一定会在使用之前这样: //document ready $(document).ready(function(){ ...code... }) / ...

  2. JavaScript学习之事件原理和实践

    1 基本概念 1.1 事件 JavaScript与HTML之间的交互是通过事件实现的. 事件是文档或浏览器窗口中发生的一些特定的交互瞬间,在事件上可以注册处理程序,以便当事件发生时,处理程序中的代码得 ...

  3. javascript 中的事件机制

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

  4. C# 调用load事件

    在一个函数或者事件中调用另外的事件,例如调用Load事件 private void EventForm_Load(object sender, EventArgs e) { //相关内容 } priv ...

  5. 【WPF】UserControl 的 Load事件

    经过查看MSDN,总结下 UserControl 的 Load 事件: Q1:Load事件什么时候发生? 在控件第一次变为可见之前发生. Load事件发生在创建 UserControl 时,因此有些情 ...

  6. 8. JavaScript学习笔记——事件

    8. 事件 8.1 事件基础 /// 事件就是用户或浏览器自身执行的某种动作.诸如 click.load 和 mouseover,都是事件的名字.而响应某个事件的函数就叫做事件处理程序(或事件侦听器) ...

  7. 文件load事件:img、iframe

    iframe的 load 事件 在所有为IFRAME动态添加onload监听事件的方法中,只有 使用事件监听方式为 IFRAME 的 onload 事件绑定处理函数,IE6.7.8才有效.所以为 IF ...

  8. jQuery $(document).ready()和JavaScript onload事件

    jQuery $(document).ready()和JavaScript onload事件 Why we need a right time? 对元素的操作和事件的绑定需要等待一个合适的时机,可以看 ...

  9. jQuery中ready与load事件

    jQuery中ready与load事件(来自慕课网) jQuery有3种针对文档加载的方法 $(document).ready(function() { // ...代码... }) //docume ...

随机推荐

  1. Keepalived实现Redis Failover

    一.环境说明 操作系统版本:RHEL 5.4_64 redis版本:2.8.17 keepalived版本:1.1.15 master:10.142.130.81 slave:  10.142.130 ...

  2. HDOJ(HDU) 2161 Primes(素数打表)

    Problem Description Write a program to read in a list of integers and determine whether or not each ...

  3. FATE(完全背包)

    /* http://acm.hdu.edu.cn/showproblem.php?pid=2159 分析: 和普通的完全背包没有什么太大的区别 但是题目中给出了限制最多可杀s个怪 用二维数组dp[i] ...

  4. GitHub上传不了的解决 ssh: connect to host github.com port 22: Bad file number git did not exit cleanly (exit code 128)

    问题情况 本来一直用的是github的客户端,结果现在上传的时候出问题了,去网站上看,新项目已经创建,但是代码却怎么都上传不上去.于是只好用命令行的方式解决. Tortoisegit上是这样说的: g ...

  5. CentOS6.5 mini开启网络

    1.编辑network配置 vim /etc/sysconfig/network-scripts/ifcfg-eth0 1 2 3 4 5 6 7 DEVICE=eth0 HWADDR=00:0C:2 ...

  6. appium点击屏幕(手势)

    在android测试过程中,会遇到要点击一下屏幕的需求. 在appium旧版本使用下面代码点击android屏幕,没有报错.Map tap = new HashMap(); tap.put(" ...

  7. 5th day

    感觉mysql里面的东西好多,很容易忘记,不是很熟练,知道某些函数有某种功能,但就是想不起来函数的名字,需要去翻笔记,真的还需要大量的练习,毕竟这块的内容可以说是全新的...不知道后面做项目怎么样,这 ...

  8. Thrift初用小结

    thrift --gen  csharp  search.thrift thrift --gen java search.thrift Thrift是facebook的一个技术核心框架,07年四月开放 ...

  9. Ubuntu12.04安装hadoop

    1.      创建hadoop用户组和用户 a.  创建hadoop用户组 sudo addgroup hadoop b.  创建hadoop用户 sudo adduser –ingroup had ...

  10. Jquery AJAX 调用WebService服务

    对Jquery+JSON+WebService的一点认识 文章不错:http://www.cnblogs.com/tyb1222/archive/2011/10/13/2210549.html Jqu ...