HTML元素添加事件

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

liulu璐

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

阅读量121

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_43566612/article/details/107402956

本文介绍了三种在HTML中实现按钮点击事件的方法：直接在按钮标签内使用onclick属性调用函数；在JavaScript中通过getElementById获取按钮并设置onclick属性；使用addEventListener监听按钮的click事件。这些方法均可使按钮在被点击时在控制台输出'hello'或'hello,小姐姐'。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		 <input type="button" value="按钮" id="button" onclick="test()" /> 
		<script type="text/javascript">
			function test(){
				console.log("hello")
			} 
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	
	<body>
		<input type="button" value="按钮" id="button"  />
		<script type="text/javascript">
			document.getElementById("button").onclick=function(){
				console.log("hello");
			}	
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	
	<body>
		<input type="button" value="按钮" id="button"  />	
		<script type="text/javascript">		
			document.getElementById("button").addEventListener("click",function(){
				console.log("hello,小姐姐");
			});
		</script>
	</body>
</html>