jQuery ready和JS onload事件的区别

时间：03-07来源：作者：点击数：

在 jQuery 中，我们使用 $(document).ready() 来替代 JavaScript 中的 window.onload，但这并不是简单的替换。实际上 jQuery 的 ready 事件和 JavaScript 的 onload 事件虽然有着相同的功能，但是两者之间也有着细微的区别。

JavaScript的onload事件

在 JavaScript 中，onload 表示文档加载完成后再执行的一个事件。

语法：

window.onload = function(){
……
}

对于 JavaScript 的 onload 事件来说，只有当页面上的所有 DOM 元素以及所有外部文件（图片、外部 CSS、外部 JavaScript 等）加载完成之后才会执行。这里的“所有 DOM 元素”，指的是 HTML 部分的代码。

举例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="css/index.css"  rel="stylesheet" type="text/css" />
    <script>
        window.onload = function(){
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function(){
                alert("欢迎来到 城东书院！");
            };
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="提交"><br/>
    <img src="img/1.png" alt="">
</body>
</html>

程序执行效果如图 1 所示。

图 1：JavaScript 的 onload 事件

在这个例子中，所有 DOM 元素加载完成后还不能触发 onload 事件，必须等到外部 CSS 文件以及图片加载完成才可以。

在 JavaScript 中，window.onload 只能调用一次，如果多次调用，则只会执行最后一个。

举例：多次调用 window.onload

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function(){
            console.log("第1次调用");
        }
        window.onload = function(){
            console.log("第2次调用");
        }
        window.onload = function(){
            console.log("第3次调用");
        }
    </script>
</head>
<body>
</body>
</html>

程序执行结果如图 2 所示。

图 2：多次调用 window.onload 的效果

从这个例子可以看出，如果多次调用 window.onload，则 JavaScript 只会执行最后一个 window.onload。为了解决这个问题，我们大多数时候是使用 addEventListener() 来实现多次调用的效果，代码如下。

window.addEventListener("load", function(){}, false);

jQuery的ready事件

在 jQuery 中，ready 也表示文档加载完成后再执行的一个事件。

语法：

$(document).ready(function(){
……
})

对于 jQuery 的 ready 事件来说，只要页面上的所有 DOM 元素加载完成就可以执行，不需要再等到外部文件（图片、外部 CSS、外部 JavaScript）加载完成。

举例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="css/index.css"  rel="stylesheet" type="text/css" />
    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                alert("欢迎来到 城东书院！");
            });
        })
    </script>
</head>
<body>
    <input id="btn" type="button" value="提交"><br/>
    <img src="img/1.png" alt="">
</body>
</html>

预览效果如图 3 所示。

图 3：jQuery 的 ready 事件

在这个例子中，只需要等所有 DOM 元素加载完成就可以执行 ready 事件，而不需要再等到外部 CSS 文件以及图片加载完成。

在 jQuery 中，ready 事件是可以多次执行的。从这里可以看出 jQuery 有非常良好的兼容性。

举例：多次调用 $(document).ready()

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(document).ready(function(){
            console.log("第1次调用");
        })
        $(document).ready(function() {
            console.log("第2次调用");
        })
        $(document).ready(function() {
            console.log("第3次调用");
        })
    </script>
</head>
<body>
</body>
</html>

程序执行结果如图 4 所示。

图 4：多次调用 $(document).ready() 的效果

对 jQuery ready 和 js onload 事件的区别我们可以总结如下：

jQuery 的 ready 事件仅仅是 DOM 元素加载完成就可以执行，而 JavaScript 的 onload 事件在 DOM 元素加载完成后还需要等所有外部文件也加载完成才可以执行；
在JavaScript 中，onload 只能调用一次，如果多次调用，则只会执行最后一个。在 jQuery 中，ready 事件可多次执行的；
jQuery 的 ready 事件相对于 JavaScript 的 onload 事件来说，极大地提高页面的响应速度，有着更好的用户体验。

方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号

来顶一下

返回首页

上一篇:jQuery ready事件的4种写法下一篇:jQuery事件是什么？

高考生入学注意：这些大	【健康】纯净水、天然
14种竞赛生升学路径盘	excel后缀xls和xlsx有