全面解析jQuery $(document).ready()和JavaScript onload事件


Posted in Javascript onJune 08, 2016

对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子:

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>1-1</title>
<script type="text/javascript">
document.getElementById("panel").onclick = function () {
alert("元素已经加载完毕 !");
}
/*执行错误*/
</script>
</head>
<body>
<div id="panel">click me.</div>
</body>
</html>

如果这样,还没有等待元素加载完就给 div#panel 绑定了一个事件,浏览器Console中会报错: TypeError:

document.getElementById(...) is null

更改一下时机,下面三个程序都是可以成功绑定事件的,点击元素之后会弹出相应的alert().

把事件绑定放在body里,元素之后:

由于绑定事件在元素之后,所以可以成功获取 div#panel 的元素,并在 div#panel 上绑定点击事件。

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>1-2</title>
</head>
<body>
<div id="panel">click me.</div>
<script type="text/javascript">
document.getElementById("panel").onclick = function () {
alert("元素已经加载完毕 !");
}
/*正确执行*/
</script>
</body>
</html>

把事件绑定放在window.onload中进行事件绑定:

window.onload 事件的处理函数则在页面所有元素加载完成之后才执行,所以这里给获取元素并绑定事件也是可行的。

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>1-2</title>
</head>
<body>
<div id="panel">click me.</div>
<script type="text/javascript">
document.getElementById("panel").onclick = function () {
alert("元素已经加载完毕 !");
}
/*正确执行*/
</script>
</body>
</html>
jQuery的ready()方法传入绑定事件的方法:
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>1-3</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
document.getElementById("panel").onclick = function () {
alert("元素已经加载完毕 !");
}
/*正确执行*/
});
</script>
</head>
<body>
<div id="panel">click me.</div>
</body>
</html>

jQuery $(document).ready()和window.onload

根据ready()方法的API说明http://api.jquery.com/ready/。

这个方法接收一个function类型的参数ready(handler), 方法的作用是: Specify a function to execute when the DOM is fully loaded.即当DOM加载完毕的时候,执行这个指定的方法.因为只有document的状态ready之后,对元素的操作才是安全的. $(document).ready() 仅在DOM准备好的时候执行一次,但可以多次绑定 ready 事件。

与ready相比,load事件会等到页面渲染完成执行,即等到所有的资源(比如图片)都完全加载完成的时候才会执行。 $(window).load(function(){…}) 会等整个页面,不仅仅是DOM,还包括图像和iframes都准备好之后,再执行.而ready()是在DOM准备好之后就执行了,即DOM树建立完成的时候.所以通常ready()是一个更好的时机.

如果DOM初始化完成之后再调用ready()方法,传入的新的handler将会立即执行.

注意:ready()方法多次调用,传入的handler方法会串联执行(追加).而JavaScript中,window.onload是赋值一个方法,即后面的会覆盖掉前面的.

$(document).ready()的三种简写

$( document ).ready(handler)
$().ready(handler)//(this is not recommended)
$(handler)

window对象和document对象

Window对象表示浏览器中打开的窗口: http://www.w3school.com.cn/jsref/dom_obj_window.asp
Document对象表示载入浏览器的HTML文档: http://www.w3school.com.cn/jsref/dom_obj_document.asp

Event对象

Event 即事件,代表了各种状态:http://www.w3school.com.cn/jsref/dom_obj_event.asp

事件句柄使我们可以在事件发生的时候附加一些操作和处理,比如按钮点击事件发生的时候,进行什么什么操作.上面的参考链接中含有一个属性列表,对应各种事件,可以利用这些属性定义事件的行为.文中关注的onload就是其中一个事件.

onload事件

onload 事件: http://www.w3school.com.cn/jsref/event_onload.asp

onload 事件是在加载完成后立即发生.(注意其中的l是小写).

支持该事件的标签是: <body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

支持该事件的JavaScript对象是: image, layer, window .注意这里并没有 document .

onload使用解析

最常用的就是 window.onload , 会等到整个页面及各种资源都加载完成之后再执行后面赋值的 function 行为.另外,可以在标签中使用 onload ,比如:

<body onload="inlineBodyOnloadTimeCounter();">

其中 inlineBodyOnloadTimeCounter() 是一个自定义的JavaScript function.

注意 jQuery ready() 的API文档中有这么一段:

The .ready() method is generally incompatible with the attribute. If load must be used, either do not use .ready() or use jQuery's .load() method to attach load event handlers to the window or to more specific items, like images.

注释: ready() 方法和 <body onload=""> 是不兼容的.

以上所述是小编给大家介绍的全面解析jQuery $(document).ready()和JavaScript onload事件的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 Javascript
js去空格技巧分别去字符串前后、左右空格
Oct 21 Javascript
JS设置cookie、读取cookie、删除cookie
Apr 17 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
异步加载JS、CSS代码(推荐)
Jun 15 Javascript
全面理解JavaScript中的继承(必看)
Jun 16 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
jQuery中DOM操作原则实例分析
Aug 01 jQuery
ES2020 新特性(种草)
Jan 12 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 #Javascript
JavaScript中两个字符串的匹配
Jun 08 #Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 #Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
Jun 08 #Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 #Javascript
Javascript之String对象详解
Jun 08 #Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 #Javascript
You might like
基于PHP文件操作的详细诠释
2013/06/21 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
使用Codeigniter重写insert的方法(推荐)
2017/03/23 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
python列表操作使用示例分享
2014/02/21 Python
Python单链表的简单实现方法
2014/09/23 Python
对于Python的Django框架部署的一些建议
2015/04/09 Python
Python3实现从指定路径查找文件的方法
2015/05/22 Python
python简单文本处理的方法
2015/07/10 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
Python实现图片添加文字
2019/11/26 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
Python gevent协程切换实现详解
2020/09/14 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
国际花店:Pickup Flowers
2020/04/10 全球购物
最新英语专业学生求职信范文
2013/09/21 职场文书
后进生转化工作制度
2014/01/17 职场文书
《只有一个地球》教学反思
2014/02/14 职场文书
公司员工活动策划方案
2014/08/20 职场文书
西湖英语导游词
2015/02/06 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
MySQL一些常用高级SQL语句
2021/07/03 MySQL
Python 绘制多因子柱状图
2022/05/11 Python