事件绑定
在jQuery中，实现事件绑定有两种方式，一种是通过事件方法进行绑定，另一种是通过on()方法进行绑定。下面分别进行详细讲解。
1. 通过事件方法绑定事件
在前面的学习中，已经用过了单个事件的绑定，是通过调用某个事件方法，传入事件处理函数来实现的，如click()、change()等。jQuery的事件和DOM中的事件相比，省略了开头的“on”，如jQuery中的click()对应DOM中的onclick。并且，jQuery的事件方法允许为一个事件绑定多个事件处理函数，只需多次调用事件方法，传入不同的函数即可。
接下来，通过表1列举jQuery中的一些常用的事件方法。
表1 jQuery常用事件方法
| 分类 | 方法 | 说明 |
|---|---|---|
| 表单事件 | blur([[data],function]) | 当元素失去焦点时触发 |
| focus([[data],function]) | 当元素获得焦点时触发 | |
| change([[data],function]) | 当元素的值发生改变时触发 | |
| focusin([data],function) | 在父元素上检测子元素获取焦点的情况 | |
| focusout([data],function) | 在父元素上检测子元素失去焦点的情况 | |
| select([[data],function]) | 当文本框（包括<input>和<textarea>）中的文本被选中时触发 | |
| submit([[data],function]) | 当表单提交时触发 | |
| 键盘事件 | keydown([[data],function]) | 键盘按键按下时触发 |
| keypress([[data],function]) | 键盘按键（Shift、Fn、CapsLock等非字符键除外）按下时触发 | |
| keyup( [[data],function ]) | 键盘按键弹起时触发 | |
| 鼠标事件 | mouseover([[data],function]) | 当鼠标移入对象时触发 |
| mouseout([[data],function]) | 在鼠标从元素上离开时触发 | |
| click([[data],function]) | 当单击元素时触发 | |
| dblclick([[data],function]) | 当双击元素时触发 | |
| mousedown([[data], function]) | 当鼠标指针移动到元素上方，并按下鼠标按键时触发 | |
| mouseup([[data], function]) | 当在元素上放松鼠标按钮时，会被触发 | |
| 浏览器事件 | scroll([[data],function]) | 当滚动条发生变化时触发 |
| resize([[data], function]) | 当调整浏览器窗口的大小时会被触发 |
在表1中，参数function表示触发事件时执行的处理函数，参数data表示为函数传入的数据，可以使用“事件对象.data”获取。如果调用时省略参数，则表示手动触发事件。
下面通过代码演示事件方法的使用。
1 <div>绑定事件</div>
2 <script>
3 $("div").click(function() {
4 $(this).css("background", "purple");
5 });
6 $("div").mouseenter(function() {
7 $(this).css("background", "skyblue");
8 });
9 </script>上述代码中，第1行定义div元素；第3~5行为div元素并绑定单击事件，通过第4行代码修改当前元素背景色为紫色；第6~8行为div元素绑定鼠标移入事件，实现当鼠标移入div元素时，将背景色修改为天蓝色。
2. 通过on()**方法绑定事件**
on()方法在匹配元素上绑定一个或多个事件处理函数，语法如下所示。
element.on(events, [selector], fn)上述代码中，events表示一个或多个用空格分隔的事件类型，如click；selector表示子元素选择器，fn表示回调函数，即绑定在元素身上的侦听函数。
下面通过代码演示on()方法的使用。
1 // 一次绑定一个事件
2 $("div").on("click", function() {
3 $(this).css("background", "yellow")
4 });
5 // 一次绑定多个事件
6 $("div").on({
7 mouseenter: function() {
8 $(this).css("background", "skyblue");
9 },
10 click: function() {
11 $(this).css("background", "purple");
12 },
13 mouseleave: function() {
14 $(this).css("background", "blue");
15 }
16 });
17 // 为不同事件绑定相同的事件处理函数
18 $("div").on("mouseenter mouseleave", function() {
19 $(this).toggleClass("current");
20 });上述代码演示了on()方法的3种用法，第1种用法非常简单，和事件方法的方式类似。第2种用法是为on()方法传入了一个对象，对象的属性名表示事件类型，属性值表示对应的事件处理函数。第3种用法是同时为mouseenter、mouseleave事件绑定相同的事件处理函数，实现div元素的current类的切换效果。
隐藏目录
