以Event对象为例详述JavaScript中添加事件的三种方式

本文链接：https://blog.youkuaiyun.com/YJT180/article/details/102767483

本文详细介绍了JavaScript中添加事件的三种方法：通过标签属性、属性筛选和事件监听器。重点讨论了Event对象在事件处理中的作用，包括事件状态、键盘和鼠标信息，并指出事件监听器中的事件名与Event对象方法名的命名区别。

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

JavaScript中的Event事件

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态，常用事件如下：

JavaScript中添加事件的三种方式
通过在标签中为对应事件添加设定值来添加事件


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScript中添加事件</title>
	</head>
	<body>
		<input type="button" class="botton" value="添加事件" onclick="a()"/>//设置了一个按钮，显示文本为“添加事件”，当检测到鼠标点击时触发function a
		<script>
			function a(){
				console.log("添加成功");//function a功能为在控制台反馈
			}
		</script>
	</body>
</html>

效果为：

通过属性筛选来添加事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScript中添加事件</title>
	</head>
	<body>
		<input type="button" class="botton" value="添加事件"/>
		<script>
			document.getElementsByClassName("botton")[0].οnclick=function(){//document对象代表当前该HTML文档
            //getElementsByClassName()方法能通过class名来筛选出所有满足条件的html元素，返回结果为一个数组。
				console.log("点击了。。。。。");
			}
		</script>
	</body>
</html>

通过事件监听器来添加事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScript中添加事件</title>
	</head>
	<body>
		<input type="button" class="botton" value="添加事件"/>
		<script>			
			document.getElementsByClassName("botton")[0].addEventListener("click",function(){//通过个体ElementsById()方法获得的element对象中的addEventListener()方法用于添加事件监听器，第一个参数设置事件类型，第二个参数可用来设置具体事件

				console.log("点击");
			})
		</script>
	</body>
</html>

值得注意的是：事件监听器中的事件名与event对象中的方法名有所不同，区别在于没有“on”前缀