JS————H5记载完成后触发事件

最新推荐文章于 2022-04-14 19:01:59 发布

XAIhan

最新推荐文章于 2022-04-14 19:01:59 发布

阅读量623

点赞数

分类专栏： js基础引导文章标签： JS 加载时间加载完成

本文链接：https://blog.youkuaiyun.com/weixin_44220680/article/details/98767947

版权

js基础引导专栏收录该内容

23 篇文章

订阅专栏

本文探讨了在HTML5中，JavaScript的加载时机问题及其解决方案。详细解释了如何利用文档加载完成事件确保JS正确获取DOM元素，避免因加载顺序不当导致的元素获取失败。并通过实例展示了将JS代码置于文档末尾或使用jQuery的$(function(){}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在写H5和JS的时候，为了方便管和修改，我们往往通过引入外部JS的方式进行加载JS事件。或者在表头写JS代码。但是根据W3c标准，编译器对于代码的解读必须是从上到下按顺序解读。这就引发一个很尴尬的问题——我H5的 body 内容还没有加载，就进行JS的编译，从而导致JS的属性获取失败（还未加载该内容）

解决方法：

对于 jquery 用户来说，我们只需要在引入的js文件之中写入如下代码：

	$(function() {
		//写入运行的代码	
	})

这种方式的意义就是，当浏览器内容加载完毕，才会运行里面的js代码。

小技巧：并非所有的内容都需要写在里面，比如绑定的触发事件，因为只有在触发的时候才会调用事件的js代码，所以触发事件可以写在外面。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script type="text/javascript">
		var div1 = document.getElementById('div1');
		console.log(div1)
	</script>
	<body>
		<div id="div1" onclick="alert('123')"></div>
	</body>
		
</html>

在这里插入图片描述
可以看出，当运行如上代码的时候，尽管我在 body 里面写了 div1 的存在，但因为并没有加载便运行了js代码，从而导致并未获取到需要的元素，导致系统输出结果为 null。

现在我们将JS代码写在末尾试试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<div id="div1" onclick="alert('123')"></div>
	</body>
	<script type="text/javascript">
		var div1 = document.getElementById('div1');
		console.log(div1)
	</script>
</html>

在这里插入图片描述
当我们将js写在末尾之后，因为顺序执行，所以成功的获取到了想要的元素。（请忽略第一行的null，那是未修改前的内容）

使用加载事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var div1 = document.getElementById('div1');
			console.log(div1)
		})
	</script>
	<body>
		<div id="div1" onclick="alert('123')"></div>
	</body>
		
</html>

在这里插入图片描述
可以看到，当我们加上了加载事件之后，尽管js代码依然在h5代码之前，依然可以获取到需要的内容。这是因为，加载元素只有在h5元素加载完成后才会进行执行，所以才会这样。
**PS：使用该内容需要引入 jquery **
PS：jquery 是前端基础，最好建项目的时候就进行引入。