聊聊jQuery中的$(document).ready()和JavaScript onload

作者：Terry2018.03.19来源：Web前端之家浏览：11210评论:0

关键词：JQuery JS

大家对于jQuery中的$(document).ready()和JavaScript onload应该不会陌生，对元素的操作和事件的绑定需要等待一个合适的时机，一起可以看下面的例子：

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>1-1</title>
</head>
<body>
<script type="text/javascript">
document.getElementById("panel").onclick = function () {
alert("元素已经加载完毕 !");
}
/*执行错误*/
</script>
<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=/demo/js/jq.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和document对象，这里就不多讲，大家可以看下先前的教程文章：

[JavaScript学习]JavaScript浏览器对象-window对象

JavaScript文档对象模型-Document类型

Event对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

事件句柄　(Event Handlers)

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。

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=""> 是不兼容的。