添加事件的监听

最新推荐文章于 2024-09-08 19:46:36 发布

原创最新推荐文章于 2024-09-08 19:46:36 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

HTML 同时被 2 个专栏收录

9 篇文章

订阅专栏

JavaScript

4 篇文章

订阅专栏

HTML添加事件的方式

1.使用属性onclick，在表头定义函数

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

2.使用document.getElementById来添加事件的监听

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

3.使用addEventListener添加事件监听

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<input type="button" value="按钮" id="button"/>
		<script>       
			document.getElementById("button").addEventListener("button",test=function(){
				console.log("HelloWorld");
			});
		</script>
	</body>
</html>