JavaScript之DOM事件_javascript dom事件-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43637366/article/details/104434520

一、概念

某些组件被执行了某些操作后，触发某些代码的执行，详解如下：

事件：某些操作，如：单击，双击，键盘被按下，鼠标移动了。
事件源：组件，如按钮，文本输入框等
监听器：代码
注册监听：将事件，事件源，监听器结合在一起，当事件源上发生了某个事件，则触发执行某个监听器代码

二、常见事件

1.点击事件

1.onclick：单击事件
2.ondblclick：双击事件

2.焦点事件

1.onblur：失去焦点，一般用于表单验证
2.onfocus：元素获得焦点

3.加载事件

onload：一张页面或一幅图像完成加载

4.鼠标事件

1.onmousedown：鼠标按钮被按下
 *定义方法时，定义一个形参，接受event对象。
 *event对象的button属性可以获取鼠标那个按钮被点击了。
2.onmouseup：鼠标按钮被松开
3.onmousemove：鼠标被移动
4.onmouseover：鼠标移到某元素之上
5.onmouseout：鼠标从某元素移开

5.键盘事件

1.onkeydown：某个键盘按键被按下
2.onkeyup：某个键盘按键被松开
3.onkeypress：某个键盘按键被按下并松开

6.选中和改变

1.onchange：域的内容被改变
2.onselect：文本被选中

7.表单事件

1.onsubmit：确认按钮被点击
 *可以阻止表单提交，方法要返回false则表单被阻止提交
2.onreset：重置按钮被点击

三、案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常见事件的演示</title>
	</head>
	<body>
		<form action="#" id="form">
		<input type="button" id="btn1" value="请单击" />
		<br />
		<input type="button" id="btn2" value="双击" />
		<br />
		
		<input id="username"/>
	
		<select id="city">
			<option>--请选择--</option>
			<option>--北京--</option>
			<option>--西安--</option>
			<option>--杭州--</option>
		</select>
		
		<br />
		<input type="submit" value="提交" />
		</form>
		
	<script>
		
		//1.单击事件
		var btn1 = document.getElementById("btn1");
		btn1.onclick = function(){
			alert("这是单击事件");
		}
		
		//2.双击事件
		var btn2 = document.getElementById("btn2");
		btn2.ondblclick = function(){
			alert("这是双击事件");
		}
		
		//3.失去焦点事件
		document.getElementById("username").onblur = function(){
		alert("失去焦点了");
		}
		
		//4.加载完成事件
		window.onload = function(){
			//等页面加载完成之后，触发函数体中的代码
		}
		
		//5.鼠标移到某元素之上事件
		document.getElementById("username").onmouseover = function(){
			alert("鼠标移到这里啦");
		}
		
		//6.鼠标点击事件
		document.getElementById("username").onmousedown = function(event){
		   alert("鼠标被点击了");
		   //左键0，中键1，右键2
		   alert(event.button);
		}
		
		//7.键盘点击事件
		document.getElementById("username").onkeydown = function(event){
			alert("键盘被点击了");
			alert(event.keyCode);
		}
		
		//8.选中和改变事件
		document.getElementById("city").onchange = function(){
			//当元素对象值被改变时执行
			alert("改变了");
		}
		
		//9.表单事件
		document.getElementById("form").onsubmit = function(){
			//效验用户名格式是否正确，返回false阻止提交，true默认提交
			var flag = false;
			return flag;
		}
	</script>	
	</body>
</html>