JavaScript添加事件的三种方法_js 添加事件-CSDN博客

本文链接：https://blog.csdn.net/DangerousMc/article/details/102675715

一.事件

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

事件	触发时机
onchange	用户改变域的内容
onclick	鼠标点击某个对象
onkeydown	某个键盘的键被按下时触发
onload	某个页面或图像被完成“加载”
onsubmit	提交按钮被点击只应用于form标签

其中，要特别注意onsubmit的用法：

1.必须用在form标签中，且input标签的type必须为“submit”
2.onsubmit调用方法时必须加return
3.所调用方法必须返回true或false

以下是使用onsubmit的代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			function test(){
				return true;
			}
		</script>
		
		<form action="http://www.baidu.com" onsubmit="return test()">
			<input type="submit" value="按钮" />
		</form>
	</body>
</html>

看起来和没添加onsubmit的效果是一样的，但是这时如果改变test函数的返回值为false，就会发现页面无法跳转为www.baidu.com了

二.添加事件的三种方法

1.直接添加

第一种添加事件的方式就是直接在目标标签中写出要添加的事件，并为该事件赋值要调用的JavaScript函数，以下是代码示例：

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

2.用document对象为事件赋值

第二种添加事件的方式是在script标签中调用document对象通过目标标签的名字或id名或类名来获取该标签的document对象，然后调用目标事件的属性并赋值，以下是代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="按钮" id="gg"/>
		
		<script>
			document.getElementById("gg").onclick=function test(){
				console.log("第二种添加事件方式");
			}
		</script>
	</body>
</html>

3.使用addEventsListener()方法

第三种添加事件的方法还是使用目标标签的document对象，调用addEventsListener方法为目标事件赋值，以下是代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="按钮" id="gg"/>
		
		<script>
			document.getElementById("gg").addEventListener("click",function test(){
				console.log("调用方法添加事件");
			})
		</script>
	</body>
</html>