（第3讲）jQuery的事件

1、jQuery 通过bind()、live( )、one()、.delegate()来为元素绑定这些事件

（1）bind( )方法用于将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象。

（向匹配元素添加一个或多个事件处理器）

bind(eventType,[data],function)

eventType：用于指定待绑定的事件，比如常见的有:click,focus,blur等，可一次性指定多个事件，多个事件之间使用英文逗号分隔；

[data]：是可选参数，一般很少使用，当声明该参数的时候，将允许我们传递额外的参数给事件处理函数。

function：是事件处理函数

（2）live( )方法将一个事件处理程序附加到与当前选择器匹配的所有元素（包含现有的或将来添加的）的指定事件上并返回jQuery对象。

（向当前或未来的匹配元素添加一个或多个事件处理器）

.live(eventType,[eventData],handler)

其中，参数eventType是一个字符串，包含一个或多个javaScript事件类型，例如click，keydown或自定义事件的名称，eventData是可选参数，为Map类型，给出要传递给事件处理程序的数据，该参数是在jQuery1.4中添加的；handler是一个函数，当触发该事件时将执行这些函数

.live()方法将事件处理程序handler附加到每个匹配元素（包含当前存在的和将来添加的）的eventType事件上，必要时还可以使用参加eventData向事件处理程序传递数据。

.live()方法是基本的.bind()方法的一个变形，后者可以将事件处理程序附加到元素·，当调用.bind()时，jQuery对象匹配的元素将被附加上事件处理程序，但以后添加的元素并不会被附加该事件处理程序，因此，还需要对这些元素再次调用.bind()方法。

（3）.one()方法将事件处理程序附加到匹配元素的指定事件并返回jQuery对象。所附加的事件处理程序最多只能执行一次。（附加的事件处理程序最多只能执行一次）

.one(eventType,[eventData],handler(eventObject))

其中，参数eventType是一个字符串，包含一个或多个javaScript事件类型，例如click，submit或自定义事件的名称，指定多个事件类型时用空格分隔各个类型；eventData为Map类型，给出要传递给事件处理程序的数据，handler指定触发该事件时要执行的函数，eventObject表示事件对象。

.one()方法与.bind()类似，所不同的是，使用.one()绑定的事件处理程序在执行一次之后将自动取消绑定。

（4）.delegate()方法基于一组特定的根元素将处理程序附加到匹配选择器的所有元素（现有的或将来的）的一个或多个事件上（适用于当前或未来的元素）

.delegate(selector,eventType[,eventData],handler)

其中，参数 selector是一个选择器，用于筛选触发事件的元素；eventType是一个字符串，指定一个或多个JavaScript事件类型（多个事件用空格分隔），例如click,keydown或自定义事件名称；eventData为映射类型，表示要传递给事件处理程序的数据；handler表示触发该事件时执行的函数。

.delegate()与.live()类似，可将每个事件的绑定委托给指定的DOM元素。

（5）.on()方法  为指定的元素,添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

（使用 delegate() 方法的事件处理程序适用于当前或未来的元素）

$(selector).on(event,childselector,data,function)

总结：

1、bind()函数在jquery1.7版本以前比较受推崇，1.7版本出来之后，官方已经不推荐用bind()，替代函数为on(),这也是1.7版本新添加的函数，同样，可以用来代替live()函数，live()函数在1.9版本已经删除；

2.live()函数和delegate()函数两者类似，但是live()函数在执行速度，灵活性和CSS选择器支持方面较delegate()差些 

3.bind()支持Jquery所有版本；live()支持jquery1.8-；delegate()支持jquery1.4.2+；on()支持jquery1.7+；

4.如果项目中引用jquery版本为低版本，推荐用delegate(),高版本jquery可以使用on()来代替 

2、jQuery 通过unbind()、off()来为元素解除绑定事件

（1）.unbind()方法移除用.bind()绑定的事件

unbind:function(type,fn){

 return   this.off(type, null, fn);

} 

使用$(selector).unbind();  删除所有当前元素的事件；

使用 $(selector).unbind(parameter); 来删除指定类型事件   

 eg:

$('input').bind('click', fn1);   //当点击input时，触发程序fn1

$('input').bind('click', fn2);   //当点击input时，触发程序fn2

$('input').unbind('click', fn1);  //只删除 fn1 处理函数的事件 

 （2）.off()方法移除用.on()绑定的事件

    off(events,[selector],[data],fn)　　events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。　　selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。　　data:当一个事件被触发时要传递event.data给事件处理函数。　　fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

 （3）.undelegate()方法移除用.delegate()绑定的事件

       undelegate : function(selector, types,fn){

                return  arguments.length===1? this.off(selector,"*"):this.off(types,selector||"*",fn);

      }    

从源码可以看出：

（1）unbind和undelegate方法都是通过调用调用对象的off方法来解除事件绑定的!但是unbind的selector是null表明这个事件是直接绑定在调用对象上面的，不是进行了代理的

（2）bind方法不适用于后面动态添加的对象，但是delegate适用于后面动态添加的对象，也就是动态添加的对象也会有相应的对象，因为他是通过代理来完成的!而不是直接绑定!

（3）如果undelegate只是传入的一个参数，那么调用this.off( selector, "**" ) :否则调用this.off( types, selector || "**", fn );但是底层都是调用jQuery.event.remove方法

jQuery为了更加方便的绑定事件，封装了常用的事件，如下：  

方法名

触发条件

描述

click(fn)

鼠标

触发每一个匹配元素的 click(单击)事件

dblclick(fn)

鼠标

触发每一个匹配元素的 dblclick(双击)事件

mousedown(fn)

鼠标

触发每一个匹配元素的 mousedown(点击后)事件

mouseup(fn)

鼠标

触发每一个匹配元素的 mouseup(点击弹起)事件

mouseover(fn)

鼠标

触发每一个匹配元素的 mouseover(鼠标移入)事件

mouseout(fn)

鼠标

触发每一个匹配元素的 mouseout(鼠标移出)事件

mousemove(fn)

鼠标

触发每一个匹配元素的 mousemove(鼠标移动)事件

mouseenter(fn)

鼠标

触发每一个匹配元素的 mouseenter(鼠标穿过)事件

mouseleave(fn)

鼠标

触发每一个匹配元素的 mouseleave(鼠标穿出)事件

keydown(fn)

键盘

触发每一个匹配元素的 keydown(键盘按下)事件

keyup(fn)

键盘

触发每一个匹配元素的 keyup(键盘按下弹起)事件

keypress(fn)

键盘

触发每一个匹配元素的 keypress(键盘按下)事件

unload(fn)

文档

当卸载本页面时绑定一个要执行的函数

resize(fn)

文档

触发每一个匹配元素的 resize(文档改变大小)事件

scroll(fn)

文档

触发每一个匹配元素的 scroll(滚动条拖动)事件

focus(fn)

表单

触发每一个匹配元素的 focus(焦点激活)事件

blur(fn)

表单

触发每一个匹配元素的 blur(焦点丢失)事件

focusin(fn)

表单

触发每一个匹配元素的 focusin(焦点激活)事件

focusout(fn)

表单

触发每一个匹配元素的 focusout(焦点丢失)事件

select(fn)

表单

触发每一个匹配元素的 select(文本选定)事件

change(fn)

表单

触发每一个匹配元素的 change(值改变)事件

submit(fn)

表单

触发每一个匹配元素的 submit(表单提交)事件

 2, 事件对象的常见属性

• type属性，用于获取事件的类型，比如说获取点击事件是click，event.type();
• event.pageX,event.pageY属性

   event.pageX/event.pageY相当于ie中的event.x/event.x；

                       firefox中的event.pageX/event.pageY. 

• event.target属性，获取触发事件的DOM元素（注意不是jquery元素）
• event.which属性，用于获取在鼠标单击事件中，按下的键码。比如左键=37；右键=39，上键=38，下键=40
• event.originalEvent属性，指向原始的DOM事件对象
• event.preventDefault()方法，阻止默认事件
  

• event.stopPropagation()方法，阻止冒泡

• event.relatedTarget属性

  在标准的DOM中，mouseover和mouseout所发生的元素可以通过event.target来访问，相关元素是通过event.relatedTarget属性来访问的。event.relatedTarget方法在mouseover中相当于ie浏览器中的event.fromElement()方法，在mouseout中相当于ie浏览器的event.toElement方法，jquery对其进行了封装，使之兼容多种浏览器。

 eg:

$('input').bind('click', fn1);   //当点击input时，触发程序fn1

$('input').bind('click', fn2);   //当点击input时，触发程序fn2

$('input').unbind('click', fn1);  //只删除 fn1 处理函数的事件