简述jQuery中的事件绑定

本篇是我jQuery系列网摘文章之第七篇，系统的讲解了学习jQuery的基础知识，谢谢关注，希望继续关注我后面的文章:

首先示例一个单击事件绑定：

$("#testDiv4").bind("click",function(event){alert("one");});

引申jQuery事件处理函数的好处：

1.添加的是多播事件委托，也就是为click事件又添加了一个方法，不会覆盖对象的click

事件原有的事件处理函数

2.统一了事件名称

添加多播事件委托时，ie中是事件名称前面有"on",但是使用bind()函数我们不用区分

ie和dom，因为内部jQuery已经帮我们统一了事件的名称

3.可以将对象行为全部用脚本控制

让HTML代码部分只注意“显示”逻辑，现在的趋势是将HTML的行为，内容与样式分干净，

其中用脚本控制元素行为，用HTML标签控制元素内容，用CSS控制元素样式，使用jQuery事件处理函数可以

避免在HTML标签上直接添加事件

jQuery事件处理函数：

bind(type,[data],fn)，为每一个匹配元素的特定事件绑定一个事件处理器函数,示例：

$("p").bind("click",data,function(){

      alert($(this).text+"/r"+data);

});

one(type,[data],fn);为每一个匹配元素的特定事件绑定一个一次性的事件处理函数,

trigger(event,[data])在每一个匹配的元素上触发某类事件,这个函数也会导致浏览器同名的

默认行为的执行，如果要阻止这种默认行为，应返回false,示例：

$("p").click(function(event,a,b){

      alert(a+b);

}).trigger("click",["Hello","World!"]);

将弹出Hello World!

triggerHandler(event,[data]),这个方法将会触发指定的事件类型上所有绑定的处理

函数，但不会执行浏览器默认动作.

unbind(type,fn),bind()的反响操作，从每一个匹配的元素中删除绑定的事件,示例：

$("p").unbind()把所有段落的所有事件取消绑定,$("p").unbind("click")将所有段落

的click取消绑定，$("p").unbind("click",foo)，取消所有段落单击事件的foo函数的

发生.

函数使用举例：

function handler(event){

      alert(event.data.foo);

}

$("p").bind("click",{foo:"bar"},handler);注意相对于在handler上写参

event.data.foo更简便一些,另外event.target也可以代替函数处理中的this,具体

event属性参照API

快捷事件Event Helpers

虽然我们可以使用事件处理函数完成对象事件的几乎所有操作，但是jQuery提供了对

常用事件的封装，比如单击事件对应的两个方法click()和click(fn)分别用来触发单击

事件和设置单击事件,比如：

$("#test").click(function(event){...});等效于

$("#test").bind("click",function(event){.....});

而$("#test").click();等效于$("#test").trigger("click");

对于交互帮助方法hover(over,out)和toggle(fn1,fn2,fn3)此处不予过多讲解