全面解析jQuery $(document).ready()和JavaScript onload事件
对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子:
<!DOCTYPEhtml>
<metacharset="utf-8">
<html>
<head>
<title>1-1</title>
<scripttype="text/javascript">
document.getElementById("panel").onclick=function(){
alert("元素已经加载完毕!");
}
/*执行错误*/
</script>
</head>
<body>
<divid="panel">clickme.</div>
</body>
</html>
如果这样,还没有等待元素加载完就给div#panel绑定了一个事件，浏览器Console中会报错:TypeError:
document.getElementById(...)isnull
更改一下时机,下面三个程序都是可以成功绑定事件的,点击元素之后会弹出相应的alert().
把事件绑定放在body里,元素之后:
由于绑定事件在元素之后，所以可以成功获取div#panel的元素，并在div#panel上绑定点击事件。
<!DOCTYPEhtml>
<metacharset="utf-8">
<html>
<head>
<title>1-2</title>
</head>
<body>
<divid="panel">clickme.</div>
<scripttype="text/javascript">
document.getElementById("panel").onclick=function(){
alert("元素已经加载完毕!");
}
/*正确执行*/
</script>
</body>
</html>
把事件绑定放在window.onload中进行事件绑定:
window.onload事件的处理函数则在页面所有元素加载完成之后才执行，所以这里给获取元素并绑定事件也是可行的。
<!DOCTYPEhtml>
<metacharset="utf-8">
<html>
<head>
<title>1-2</title>
</head>
<body>
<divid="panel">clickme.</div>
<scripttype="text/javascript">
document.getElementById("panel").onclick=function(){
alert("元素已经加载完毕!");
}
/*正确执行*/
</script>
</body>
</html>
jQuery的ready()方法传入绑定事件的方法:
<!DOCTYPEhtml>
<metacharset="utf-8">
<html>
<head>
<title>1-3</title>
<scriptsrc="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
document.getElementById("panel").onclick=function(){
alert("元素已经加载完毕!");
}
/*正确执行*/
});
</script>
</head>
<body>
<divid="panel">clickme.</div>
</body>
</html>
jQuery$(document).ready()和window.onload
根据ready()方法的API说明http://api.jquery.com/ready/。
这个方法接收一个function类型的参数ready(handler),方法的作用是:SpecifyafunctiontoexecutewhentheDOMisfullyloaded.即当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)//(thisisnotrecommended)
$(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,比如:
<bodyonload="inlineBodyOnloadTimeCounter();">
其中inlineBodyOnloadTimeCounter()是一个自定义的JavaScriptfunction.
注意jQueryready()的API文档中有这么一段:
The.ready()methodisgenerallyincompatiblewiththeattribute.Ifloadmustbeused,eitherdonotuse.ready()orusejQuery's.load()methodtoattachloadeventhandlerstothewindowortomorespecificitems,likeimages.
注释：ready()方法和<bodyonload="">是不兼容的.
以上所述是小编给大家介绍的全面解析jQuery$(document).ready()和JavaScriptonload事件的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！