jQuery事件处理

一、事件模型基础
jQuery使劲按模型体现了以下特征：
①统一了事件处理中的各种方法
②允许在每个元素上为每个事件类型建立多个处理程序
③采用了DOM事件模型中标准的事件类型名称
④统一了event事件对象的传递方法，并进行了规范
⑤为事件管理和操作提供了统一的方法
jQuery事件模型不支持DOM中的捕获型阶段

1、绑定事件
jQuery提供了四种事件绑定方式：bind()、live()、delegate()、on().
1）bind(event,data,function)
event和function是必需参数，可以设计多事件处理，直接用空格隔开就可以$("#div").bind("click dbclick mouseout",data,function)
可以使用大括号灵活定义多个事件，如$("#div").bind({event1:function,event2:function,...})
官方推荐，从jQuery1.7版本之后，推荐使用on()方法代替bind()方法

2）live(event,data,function)为当前或者未来的匹配元素添加一个或多个事件处理程序
event和function是必须参数
jQuery1.9版本以下支持live()，1.9以上被删除了

3）delegate(childSelector,event,data,function)适用于当前或未来的元素，如由脚本创建的元素等。
childrenSelector：必须参数项，指定需要注册事件的元素，一般为调用对象的子元素
event：必须参数项，添加到元素的一个或多个事件
data：可选参数项，设计需要传递的参数
function：必须参数项，当绑定事件发生时，需要执行的函数
delegate()适用于jQuery1.4.2及其以上版本。

4）on(event,childSelector,data,function)
只有event和function是必选项
on()方法适用于jQuery1.7及以上版本，用来替代bind()和live()方法绑定事件方式
传递data参数：
$("ul").on("click","li",{a:"A",b:"B"},function(e){
$(this).text(e.data.a+e.data.b);
})
使用preventDefault()方法可以至取消默认的行为
使用stopPropagation()方法可以只阻止一个事件起泡
若是都想取消，则返回一个false即可。
这四种方法都是通过事件冒泡方式，将事件传递到document进行事件的响应

2、事件方法
除了事件专用绑定方法以外，jQuery还定义了如下24个快捷方法

blur()	focusin()	mousedown()
change()	focusout()	mousemove()
click()	keydown()	mouseout()
dblclick()	keypress()	mouseover()
error()	keyup()	mouseup()
focus()	mouseenter()	mouseleave()

3、绑定一次性事件
one(event,[data],function)

4、注销事件
jQuery提供的四种事件绑定方式对应四种注销事件方式：
unbind()、die()、undelegate()、off()
off()
off(event)

5、使用事件对象
共有16个jQuery安全的event对象属性和方法（略)

6、触发事件
使用trigger(type,[data])可以直接触发事件处理函数
type表示事件类型，data是可选参数，用来传递额外数据
triggerHandler()方法是对trigger()方法的补充，它不会触发浏览器默认事件，只触发jQuery对象中第一个元素的事件处理函数，它返回的不是jQuery对象。

7、切换事件
1）显示隐藏事件 toggle([speed],[easing],[fn])
参数speed为可选参数，表示隐藏/显示效果的速度，默认为0毫秒，可选参数如”slow”、”normal”、“fast”
参数easing也是可选参数，用来指定切换效果，默认是”swing”，可用参数“linear”
参数fn也是可选参数，定义在动画完成时执行的函数。
2）悬停事件
hover(鼠标移到元素上要触发的函数，鼠标移出元素要触发的函数)
mouseout事件存在一个严重的错误，当鼠标移动到当前元素的子元素上时，会触发当前元素的mouseout和mouseover事件，而hover()方法解决了这个问题

8、事件命名空间
即事件的别名
$("div").on("click.a",function(){})其中的a就是这个事件的别名
$("div").off(".a")

9、自定义事件，jQuery事件支持自定义事件，都可以通过trigger()方法触发。

10、页面初始化
jQuery定义了ready()方法封装了JavaScript原生的window.onload方法，它极大地提高了web应用程序的响应速度。
jQuery允许无限次使用ready()事件，按代码的先后顺序一次执行。但是不能与JavaScript的原生load事件类型共用。
而JavaScript的load事件时在文档内容完全加载完毕后才会触发的。
jQuery的ready事件在DOM完全就绪时就可以被触发。
那么ready事件很有可能内容没有准备好就设置属性，此时的设置无效。
解决这一问题可以使用$(window).load(function(){}),可以无限次调用