HTML之JavaScript事件绑定方式小结

最新推荐文章于 2025-06-29 16:21:31 发布

原创最新推荐文章于 2025-06-29 16:21:31 发布 · 402 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML

博客介绍了HTML的三种事件绑定方式，包括嵌入dom、直接绑定和使用addEventListener() 方法。嵌入dom和直接绑定在控制台输出相同内容，addEventListener() 方法可使点击‘雪浪红尘’字样后变为‘江山如画’。

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

一、嵌入dom

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<p onclick="show()">雪浪红尘</p>
		<script>
			function show(){
				console.log("江山如画");
			}
		</script>
	</body>
</html>

控制台会输出江山如画；

二、直接绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<p id="test">雪浪红尘</p>

		<script>
			document.getElementById('test').onclick = function(){
				console.log("江山如画");
			};
		</script>
	</body>
</html>

控制台输出结果与上一步一致；

三、addEventListener() 方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<p id="test">雪浪红尘</p>

		<script>
			document.addEventListener("click",function(){
				document.getElementById("test").innerHTML="江山如画";
			})
		</script>
	</body>
</html>

执行结果：点击“雪浪红尘”字样后会自动变化为“江山如画”