$(document).ready()与windom.onload = function(){}的方法说明和加载时机
对元素的操作和事件的绑定需要等待一个合适的时机,如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面未加载执行失败</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script>
document.getElementById("panel").onclick = function() {
alert("元素已经加载完毕 !");
}
/*
执行错误,为什么?
因为dom还未加载完毕。
*/
</script>
</head>
<body>
<div id="panel">click me.</div>
</body>
</html>
如果这样,就还没有等待元素加载就给div#panel绑定一个事件,浏览器Console中就会报错:TypeError:document.getElementById(…)is null;
更改一下时机,就能成功绑定事件
把时间绑定到body里,元素之后
由于绑定事件在元素之后,所有可以成功获取绑定的点击事件:
方式一:把时间绑定到body里,元素之后
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>4-1-2</title>
</head>
<!--解决办法:
方式一:把时间绑定到body里,元素之后
方式二:将JS代码放到一个页面加载函数中去-->
<body>
<div id="panel">click me.</div>
<script type="text/javascript">
document.getElementById("panel").onclick = function() {
alert("元素已经加载完毕 !");
}
/*正确执行*/
</script>
</body>
</html>
$(document).ready()与windom.onload = function(){}的方法说明和加载时机
(document).ready(function(){});(function(){})
区别:
(document).ready()仅在DOM准备好的时候执行一次,但是可以多次绑定ready事件。
windom.onload事件是后绑定事件,会等到页面渲染完成执行,即等到所有资源(如:图片)都完全加载完成的时候才会执行。
注意:ready()方法多次调用,传入的方法会串联执行(追加),但是在JS中,windom.onload是赋值一个方法,即后面的会覆盖前面的。
方式二:将JS代码放到一个页面加载函数中去–>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面未加载执行失败</title>
<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
<script>
// $(document).ready(function(){
// document.getElementById("panel").onclick = function() {
// alert("元素已经加载完毕 !");
// }
// });
$(function(){
document.getElementById("panel").onclick = function() {
alert("元素已经加载完毕 !");
}
});
</script>
</head>
<body>
<div id="panel">click me.</div>
</body>
</html>