JavaScript中Event对象，向HTML添加事件的三种方式浅析

JAVAnuonuo

于 2020-07-17 11:18:25 发布

阅读量287

点赞数

文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/weixin_46383723/article/details/107403705

版权

1、第一种方式

<!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、第二种方式

<!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、第三种方式

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