JS常用事件，使用方法

一、事件：

加载事件：

1. load：页面或图像加载完毕

焦点事件：

2. focus：获得焦点
3. blur：失去焦点

键盘事件：

4. keydown：键盘按下
5. keyup：键盘弹起
6. keypress：某个键盘按键被按下并松开

点击事件：

7. click：鼠标单击
8. dbclick：鼠标双击

鼠标事件：

9. mouseover（mouseenter）：鼠标移入该元素
10. mouseout（mouseleave）：鼠标移出该元素
11. mousedown：鼠标按下
12. mouseup：鼠标弹起
13. mousemove：鼠标移动

表单事件：

14. reset：表单重置
15. submit：表单提交

内容被选择或改变：

16. select：文本被选中
17. change：下拉列表选中项改变，或文本框内容改变

注意：任何一个事件都会对应一个事件句柄叫做：onclick ，以属性方式存在。

二、注册事件的方式：

• 第一种方式：直接在标签中使用事件句柄

<script type="text/javascript">
	function dosome(){
		alert("hello");
	}
script>
<input type="button" value="hello1" onclick="sayhello()"/>
1
2
3
4
5
6

• 第二种方式：使用纯JS代码
  • 第一步：获取按钮对象。
  • 第二步：给按钮对象的onclick属性赋值。 只要对象中有的属性都可以通过.赋值。

<input type="button" value="hello1" id="m1"/>
<script type="text/javascript">
	function dosome(){
		alert("hello");
	}
	第一步：
	var bt1 = document.getElementById("m1");document是个内置对象，代表整个HTML页面
	第二步：
	bt1.onclick = dosome;注意函数名不加小括号

	简写为： 
	document.getElementById("m1").onclick = function(){
		alert("hello");
	}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 第三种方式：使用纯JS代码，并使用load事件

如果input标签的创建位于document.getElementById("m1")执行之后，因为还没有创建m1标签，所以会报错，解决方法是：使用onload事件
<script type="text/javascript">
	window.onload = a;//这行代码规定了整个页面加载完毕后才能执行回调函数a，防止过早获取m1对象导致找不到对象报错的情况
	function a(){
		document.getElementById("m1").onclick = function(){
			alert("hello");
		}
	}
简写为：
	window.onload = function(){
		document.getElementById("m1").onclick = function(){
			alert("hello");
		}
	}
script>
<input type="button" value="hello1" id="m1"/>//位于JS代码块之后
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16