jQuery 事件机制
1、on方式
说明：
1.最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用的方式
2.jQuery1.7版本后，jQuery用on统一了所有的事件处理的方法
$(selector).on(events,selector,data,handler);
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用
// 第四个参数：handler，事件处理函数
$(selector).on("click","span", function() {});
// 表示给$(selector)绑定事件，但必须是它的内部元素span才能执行这个事件
$(selector).on("click mouseenter", function(){ });
// 绑定多个事件
// 表示给$(selector)匹配的元素绑定单击和鼠标进入事件
2、事件解绑
- unbind ( ) 方式 和 undelegate ( ) 方式
作用：解绑 bind方式绑定的事件
$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click"); //解绑指定的事件
作用：解绑delegate方式绑定的事件
$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( "click" ); //解绑所有的click事件
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off("click");
// 解绑所有代理的click事件，元素本身的事件不会被解绑
$(selector).off( "click", "**" );
3、事件触发
$(selector).click(); // 简单事件触发，触发 click事件
$(selector).trigger("click"); // trigger方法触发事件
$(selector).triggerHandler("focus"); // triggerHandler触发 事件响应方法，不触发浏览器行为 比如:文本框获得焦点的默认行为
4、事件对象介绍
event.data 传递给事件处理程序的额外数据
event.currentTarget 等同于this
event.pageX 鼠标相对于页面左边的位置
event.target 触发事件源，不一定===this
event.stopPropagation()； 阻止事件冒泡
event.preventDefault(); 阻止默认行为
event.type 事件类型：click，dbclick…
event.which 鼠标的按键类型：左1 中2 右3
event.keyCode 键盘按键代码
return false; // 同时具有阻止冒泡和阻止默认行为的功能
this：哪个元素触发的事件，this就指向这个元素。
5、事件的发展历程
简单事件绑定 >> bind事件绑定 >> delegate事件绑定 >> on
click(handler) 单击事件
blur(handler) 失去焦点事件
mouseenter(handler) 鼠标进入事件
mouseleave(handler) 鼠标离开事件
dbclick(handler) 双击事件
change(handler) 改变事件，如：文本框值改变，下来列表值改变等
focus(handler) 获得焦点事件
keydown(handler) 键盘按下事件
其他参考：http://www.w3school.com.cn/jquery/jquery_ref_events.asp
- bind方式（不推荐，1.7以后的jQuery版本被on取代）
作用：给匹配到的元素直接绑定事件
// 绑定单击事件处理程序
第一个参数：事件类型
第二个参数：事件处理程序
$("p").bind("click mouseenter", function(e){
//事件响应方法
});
比简单事件绑定方式的优势：
可以同时绑定多个事件，比如：bind("mouseenter mouseleave", function(){ });
缺点：要绑定事件的元素必须存在文档中。
- delegate方式（特点：性能高，支持动态创建的元素）
作用：给匹配到的元素绑定事件，对支持动态创建的元素有效
// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(".parentBox").delegate("p", "click", function(){
//为 .parentBox下面的所有的p标签绑定事件
});
与前两种方式最大的优势：减少事件绑定次数提高效率，支持动态创建出来的元素绑定事件！
