jQuery 事件机制

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事件

• off解绑on方式绑定的事件（重点）

// 解绑匹配元素的所有事件
$(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标签绑定事件
});
与前两种方式最大的优势：减少事件绑定次数提高效率，支持动态创建出来的元素绑定事件！