$(document).ready()与windom.onload = function(){}的方法说明和加载时机

最新推荐文章于 2022-05-20 10:10:38 发布

lk小强

最新推荐文章于 2022-05-20 10:10:38 发布

阅读量524

点赞数

本文链接：https://blog.csdn.net/weixin_40807247/article/details/86768315

版权

JAVAWEB 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

对元素的操作和事件的绑定需要等待一个合适的时机，如下：

<!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(){}的方法说明和加载时机
$(d o c u m e n t) . r e a d y () 的三种简写：$ (document).ready(function(){})； $ready(function(){})；$ (function(){})

区别：
$(d o c u m e n t) . r e a d y () 方法的作用：当 D O M 加载完毕的时候，执行这个指定的方法。表示文档结构已经加载完成（不包含图片等非文字媒体文件）。因为只有 d o c u m e n t 状态 r e a d y 之后，对元素的操作才是安全的。$ (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>