jQuery 事件（绑定事件/解绑事件/触发事件/事件对象）

jQuery事件

1. 事件机制

jQuery的事件机制，指的是：jQuery对JavaScript操作DOM事件的封装，包括了：事件绑定、事件解绑、事件触发。

JavaScript ：

btn.onclick = function() {}; //给这个按钮绑定事件

jQuery ：

$btn.click(function() {}); //给按钮绑定事件

click是一个方法，内部是对onclick事件的封装

 

2.       事件的发展历程（了解）

简单事件绑定 >> bind事件绑定 >> delegate事件绑定 >>  on

简单事件绑定：

click(handler)                      单击事件

blur(handler)                      失去焦点事件

mouseenter(handler)           鼠标进入事件

mouseleave(handler)                   鼠标离开事件

dblclick(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标签绑定事件
});

与前两种方式最大的优势：减少事件绑定次数提高效率，支持动态创建出来的元素绑定事件

 

注意： mouseover与mouseenter的区别：

mouseover冒泡，mouseenter不冒泡

3.       事件绑定

我们现在用on的方式来绑定事件（最现代的方式，强烈建议使用的方式）

jQuery1.7版本后，jQuery用on统一了所有的事件处理的方法

作用：给匹配的元素绑定事件，包括了上面所有绑定事件方式的优点

语法：

//参数1：events，绑定事件的名称可以是由空格分隔的多个事件
//参数2：selector, 执行事件的后代元素
//参数3：data，传递给处理函数的数据，事件触发的时候通过event.data来使用
//参数4：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);

//表示给$(selector)绑定事件，但必须是它的内部元素span才能执行这个事件
$(selector).on( "click",“span”, function() {});
 
// 绑定多个事件
// 表示给$(selector)匹配的元素绑定单击和鼠标进入事件
$(selector).on(“click mouseenter”, function(){});

 

4. 事件解绑

unbind() 方式

作用：解绑 bind方式绑定的事件

$(selector).unbind(); //解绑所有的事件
$(selector).unbind(“click”); //解绑指定的事件

undelegate() 方式

作用：解绑delegate方式绑定的事件

$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件

 

off解绑on方式绑定的事件

// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off(“click”);
// 解绑所有代理的click事件，元素本身的事件不会被解绑
$(selector).off( “click”, “**” );

 

5. 事件触发

简单事件触发

$(selector).click(); //触发 click事件

trigger 方法触发事件

$(selector).trigger(“click”);

triggerHandler触发 事件响应方法，不触发浏览器行为

比如:文本框获得焦点的默认行为

$(selector).triggerHandler(“focus”);

 

6. jQuery 事件对象介绍

event.pageX                              鼠标相对于页面左边的位置

event.target                               触发该事件的元素（事件目标）

event.currentTarget                    该事件所针对的元素对象

event.keyCode                           键盘按键代码

event.stopPropagation()；         阻止事件冒泡

event.preventDefault();                阻止默认行为

event.type                                 事件类型：click，dbclick…

event.which                                鼠标的按键类型：左1 中2 右3

event.data                                 传递给事件处理程序的额外数据

 

return false; //  也具有阻止冒泡和阻止默认行为的功能

this ：事件处理函数针对哪个元素对象，this就指向哪个元素对象