一．绑定事件
在 JavaScript 课程的学习中， 我们掌握了很多使用的事件， 常用的事件有： click、 dblclick、
mousedown、mouseup、mousemove、 mouseover、mouseout、change、 select、 submit、keydown、
keypress、keyup、blur、focus、load、resize、scroll、error。那么，还有更多的事件可以参考
手册中的事件部分。
jQuery 通过.bind()方法来为元素绑定这些事件。 可以传递三个参数： bind(type, [data], fn)，
type 表示一个或多个类型的事件名字符串；[data]是可选的，作为 event.data 属性值传递一个
额外的数据，这个数据是一个字符串、一个数字、一个数组或一个对象；fn 表示绑定到指
定元素的处理函数。
二．简写事件
为了使开发者更加方便的绑定事件，jQuery 封装了常用的事件以便节约更多的代码。 我
们称它为简写事件。
| 函数 | 描述 | html代码 | jquery代码 | 结果 |
| bind(type, [data], fn) | 为元素绑定事件 | <input type="button" name="name" value="确定" /> | $('input').bind('click', function () { alert('事件被执行了!'); }); |
执行按钮的单击事件 |
| 调用函数执行单击事件 | $('input').bind('click',fn); function fn() { alert('点击!'); } |
|||
| 绑定鼠标移开和单击多个事件 | $('input').bind('click mouseover', function () { alert('单击事件'); }); |
鼠标移开和单击多个事件 | ||
| 绑定鼠标移入和移开多个事件 | <input type="button" name="name" value="确定" /> <div></div> |
$('input').bind('mouseout mouseover', function () { $('div').html(function (index,value) { return value + '1'; }); }); |
鼠标移入和移开div标签内累加1 | |
| 通过对象键值对绑定多个参数 | $('input').bind({ mouseout: function () { alert('鼠标移出'); }, mouseover: function () { alert('鼠标移入'); } }); |
鼠标移入和移开执行单击事件 | ||
| unbind(types,fn) | 删除全部事件 | $('input').unbind(); | ||
| 只删除click事件 | $('input').unbind('click'); | |||
| 删除click事件绑定了fn2的 | $('input').unbind('click', fn2); | |||
| click(fn) | 触发每一个匹配元素的 click(单击)事件 | <input type="button" name="name" value="确定" /> | $('input').click(function () { alert('单击事件'); }); |
|
| dblclick(fn) | 触发每一个匹配元素的 dblclick(双击)事件 | $('input').dblclick(function () { alert('双击事件'); }); |
||
| mousedown(fn) | 触发每一个匹配元素的 mousedown(点击后)事件 | $('input').mousedown(function () { alert('鼠标按下事件'); }); |
||
| mouseup(fn) | 触发每一个匹配元素的 mouseup(点击弹起)事件 | $('input').mouseup(function () { alert('鼠标松开事件'); }); |
||
| mouseover(fn) | 触发每一个匹配元素的 mouseover(鼠标移入)事件 | $('input').mouseover(function () { alert('鼠标移入事件'); }); |
||
| mouseout(fn) | 触发每一个匹配元素的 mouseout(鼠标移出)事件 | $('input').mouseout(function () { alert('鼠标移出事件'); }); |
.mouseover()和.mouseout()表示鼠标移入和移出的时候触发。那么 jQuery 还封装了另外
一组：.mouseenter()和.mouseleave()表示鼠标穿过和穿出的时候触发。那么这两组本质上有
什么区别呢？手册上的说明是：.mouseenter()和.mouseleave()这组穿过子元素不会触发，
而.mouseover()和.mouseout()则会触发。
三．复合事件
jQuery 提供了许多最常用的事件效果，组合一些功能实现了一些复合事件，比如切换功
能、智能加载等。
复合事件
方法名 描述
ready(fn) 当 DOM 加载完毕触发事件
hover([fn1,]fn2) 当鼠标移入触发第一个 fn1，移出触发 fn2
toggle(fn1,fn2[,fn3..]) 已废弃，当鼠标点击触发 fn1,再点击触发 fn2...
//背景移入移出切换效果
$('div').hover(function () {
$(this).css('background', 'black'); //mouseenter 效果
}, function () {
$(this).css('background', 'red'); //mouseleave 效果，可省略
});
注意：.hover()方法是结合了.mouseenter()方法和.mouseleva()方法，并非.mouseover()
和.mouseout()方法。