jQ基础篇--$(document).ready()和JavaScript onload事件

2024年4月20日 277次阅读 来源: 风雨后见彩虹

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

<!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>

　如果这样,还没有等待元素加载完就绑定事件,

　　浏览器Console中会报错:
　　TypeError: document.getElementById(…) is null

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

　　第一种是把事件绑定放在body里,元素之后:

<!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中进行事件绑定:

<!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 type="text/javascript">
        window.onload = 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之后,对page的操作才是安全的.
　　$(document).ready()仅在DOM准备好的时候执行一次.

　　**与之相比,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/js…
　Document对象表示载入浏览器的HTML文档: http://www.w3school.com.cn/js…

Event对象

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

onload事件

　　onload事件: http://www.w3school.com.cn/js…
　　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=“”>是不兼容的.

    原文作者：风雨后见彩虹
    原文地址: https://segmentfault.com/a/1190000003701156
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞