今天给大家介绍一下on函数中events的种类和用法。

具体我把它分为：键盘事件，鼠标事件，input事件，还有一个是基础事件（例如：滚动，界面大小变化等等之类的）。

一：键盘事件有：

 

1.keydown  当键盘或按钮被按下时，发生 keydown 事件。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

2.keypress  当键盘或按钮被按下时，发生 keypress 事件。keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。 不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

3.keyup  当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

二：鼠标事件：

1.mousedown  当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。mousedown 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。

2.mouseenter  当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

3.mouseleave  当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。

4.mousemove  当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。mousemove事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标

5.mouseout 当鼠标指针从元素上移开时，发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用。注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。请看下面例子的演示。

6.mouseover  当鼠标指针位于元素上方时，会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用。注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。请看下面例子的演示。

7.mouseup  当在元素上放松鼠标按钮时，会发生 mouseup 事件。与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。

8.click 当鼠标点击并松开的时候会触发每一个匹配元素的click事件。

9.dblclick  当双击元素时，会发生 dblclick 事件。当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。在很短的时间内发生两次 click，即是一次 double click 事件。提示：如果把 dblclick 和 click 事件应用于同一元素，可能会产生问题。

三：input事件

1.获得焦点focus ：当元素获得焦点时，触发 focus 事件。可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数，注意，某些对象不支持focus方法。

2.失去焦点blur ：当元素失去焦点时触发 blur 事件。这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的

3.内容改变change ：当元素的值发生改变时，会发生 change 事件。该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。

4.选中内容select ：当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。

四：其他事件：

1.scroll 当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

2.resize  当调整浏览器窗口的大小时，发生 resize 事件。

 

 

 

基本的用法就这些，现在我用click举一个例子给大家介绍一下，这些方法是怎么实现和调用的。

 

<html>
<head>
<meta charset="UTF-8">
<title>on中的事件处理函数</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<body>
<input type="button" value="按钮" id="button_id">
  <script>
		$("#button_id").on('click', function(){
			alert("你点击了一下");
		});
  </script>
</body>
</html>

想要调用其他函数的时候，只要将click换成相应的函数就可以实现其功能了，是不是特别简单啊！

 

如果想要再继续深入学习每个函数的具体用法，可以参考JQuery中的官方API。里面介绍都很详细，我这里就不多介绍了。