JavaScript 中的事件-CSDN博客

本文链接：https://blog.csdn.net/One_L_Star/article/details/100040615

一、概念

某些组件被执行了某些操作后，出发某些代码执行

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

二、常见的事件

1、点击事件

【1】onclick：单击事件

【2】ondblclick：双击事件

2、焦点事件

【1】onblur：失去焦点

一般用于表单验证

【2】onfocus：获取焦点

3、加载事件

【1】onload：一张页面或一张图完成加载

4、鼠标事件

【1】onmousedown：鼠标按钮被按下

定义方法时，定义一个形参，接受event对象

【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：重置按钮被点击

<script type="text/javascript">
	//2、加载事件
	window.onload = function(){
		//1、失去焦点事件
		document.getElementById("usname").onblur = function(){
			alert("失去焦点");
		}
		//3、绑定鼠标移动到元素上事件
		document.getElementById("usname").onmouseover = function(){
			alert("鼠标！！");
		}
		//4、绑定鼠标点击事件
		document.getElementById("usname").onmousedown = function(event){
			alert(event.button);
		}
		//5、绑定键盘按下事件
		document.getElementById("usname").onkeydown = function(event){
			alert(event.keyCode);
		}
		//6、表单提交
		document.getElementById("usname").onsubmit = function(event){
			var flage = false;
			return flage;
		}
	}
</script>