Javascript中点击（click）事件的3种写法

最新推荐文章于 2025-09-30 15:30:02 发布

原创最新推荐文章于 2025-09-30 15:30:02 发布 · 10w+ 阅读

70 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #click

原生JS 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了JavaScript中实现按钮点击事件的三种方法：直接在HTML元素上使用onclick属性；通过JavaScript获取DOM元素并设置onclick事件；利用addEventListener方法添加事件监听。每种方法均有详细代码示例。

该文章已生成可运行项目，

方法一：

<!DOCTYPE html>
<html>
<head>
	<title>Javascript中点击事件方法一</title>
</head>
<body>
	<button id="btn">click</button>
	<script type="text/javascript">
		var btn = document.getElementById("btn");
		btn.onclick=function(){
			alert("hello world");
		}
	</script>
</body>
</html>

消除事件：btn.onclick=null;

方法二：

<!DOCTYPE html>
<html>
<head>
	<title>Javascript中点击事件方法二</title>
</head>
<body>
	<button id="btn">click</button>
	<script type="text/javascript">
		var btn = document.getElementById("btn");
		btn.addEventListener('click',function(){
			alert("hello wrold");
		},false)
	</script>
</body>
</html>

方法三：

<!DOCTYPE html>
<html>
<head>
	<title>Javascript中点击事件方法三</title>
	<script type="text/javascript">
		function test(){
			alert("hello world");
		}
	</script>
</head>
<body>
	<button id="btn" onclick="test()">click</button>
</body>
</html>

本文章已经生成可运行项目