一、事件委托函数:

方法名

说明

语法 (events 事件类型,data数据,handler 事件处理函数,selector 选择器)

live

用于为指定元素的一个或多个事件绑定事件处理函数。

jQueryObject.live( events [, data ], handler )

   jQueryObject.one( eventObject )

die

主要用于解除由live()函数绑定的事件处理函数。

jQueryObject.die( [ events [, handler ]] )
jQueryObject.die( eventObject )

delegate

用于为指定元素的一个或多个事件绑定事件处理函数。

jQueryObject.delegate( selector , events [, data ], handler )
jQueryObject.delegate( selector,eventObject )

undelegate

主要用于解除由delegate()函数绑定的事件处理函数。

jQueryObject.undelegate( [ selector , events [, handler ]] )
jQueryObject.undelegate( selector ,eventObject )

 

1.live()函数用于为指定元素的一个或多个事件绑定事件处理函数。从jQuery 1.7开始,该函数被标记为已过时;从jQuery 1.9开始被移除。请使用on()函数来替代。live()函数并不是直接在当前jQuery对象匹配的每个元素上绑定事件处理函数,而是将事件处理函数"委托"给document对象来处理。使用live()函数需要注意以下问题:当前jQuery对象必须通过选择器字符串构造,否则无法处理触发的事件;在调用该函数之前,jQuery会尝试查找当前jQuery选择器所匹配的元素。在大文档中这可能比较耗时;该函数不支持方法链。例如:$("a").find(".foo").live(...)是无效的,且无法按照预期正常工作;由于live()的事件处理函数全部附加到document对象上,因此在事件被处理之前,事件可能要经过最长最慢的事件路径;在由于平台或事件差异,有些事件不支持冒泡,从而无法冒泡传递到document,此时可能无法处理该事件;由于live()函数的事件处理函数全部附加在document对象上,如果通过某些方式解除了document对象上的事件绑定,可能会波及到使用live()函数委托绑定的其他元素的事件处理函数。例如$(document).off()。

//为div中的所有p元素的click事件绑定事件处理函数
$("div p").live("click",function(){
 alert($(this).text());
});
$("#n1").append('<p id="n6">上述绑定的click事件对此元素也生效!</p>');//后添加的n6也可以触发上述click事件,因为它也是div中的p元素 (与bind不一样)var data={id:1,name:"eric"};
var eventsMap = {
 "mouseenter": function(event){
 $(this).html( "你好!"+event.data.name); 
 },

 "mouseleave": function(event){
 $(this).html( "再见!"+event.data.name);
 }
};
$("#n5").live( eventsMap,data);//为n5绑定mouseenter mouseleave两个事件(one和bind绑定方法可以不加上data,但是on和live要加上)

2.die()函数用于移除匹配元素上绑定的一个或多个事件的事件处理函数。die()函数主要用于解除由live()函数绑定的事件处理函数。

$("#n5").die();
3.delegate()函数用于为指定元素的一个或多个事件绑定事件处理函数。(从jQuery 1.7开始,请优先使用事件函数on()替代该函数。)
// 为div中的所有p元素绑定click事件处理程序
$("div").delegate("p","click",function(event){
 alert($(this).text());
});
$("#n1").append('<p id="n6">上述绑定的click事件对此元素也生效!</p>');//后添加的n6也可以触发上述click事件,因为它也是div中的p元素
还可以同时绑定多个事件,并为事件处理函数传递一些附加的数据:
var data={id:1,name:"eric"};
var eventsMap = {
 "mouseenter": function(event){
 $(this).html( "你好!"+event.data.name); 
 },

 "mouseleave": function(event){
 $(this).html( "再见!"+event.data.name);
 }
};


$("div").delegate("#n3",eventsMap,data);/为n5绑定mouseenter mouseleave两个事件(one和bind绑定方法可以不加上data,但是on和live和delegate要加上)
4.undelegate()函数用于移除元素上绑定的一个或多个事件的事件处理函数。undelegate()函数主要用于解除由delegate()函数绑定的事件处理函数。

//$("body").undelegate( );
 $body.undelegate(":button", "click", btnClick2); <body>
 <div id="n1">
 <p id="n2"><span>CodePlayer</span></p>
 <p id="n3"><span>qinqin</span></p>
 <em id="n4">http://www.365mini.com</em>
 </div>
 <p>id="n5">Google</p>
<input id="btn1" type="button" value="点击1" />
<input id="btn2" type="button" value="点击2" />
<a id="a1" href="#">CodePlayer</a>
 <input id="btn" type="button" value="点击绑定一次" />
 <div id="n2">
 <p id="n6"><span>CodePlayer</span></p>
 <p id="n7"><span>qinqin</span></p>
 </div>
<div id="log"><div>
</body>

二、事件切换函数

方法名

说明

语法 (events 事件类型,data数据,handler 事件处理函数,selector 选择器)

hover

鼠标悬停事件。

jQueryObject.hover( handlerIn , handlerOut )
jQueryObject.hover( handlerInAndOut )

toggle

为匹配元素的click事件绑定多个事件处理函数

jQueryObject.toggle( handler1, handler2 [, handlerN... ] )

1.hover()函数用于为每个匹配元素的hover事件绑定处理函数。hover事件就是鼠标悬停事件。

$("a").hover(function(){
 $(this).css("color","red");//鼠标移上
}, function(){
 $(this).css("color","blue"); //鼠标移开
});


2.toggle()是一个特殊的事件函数,用于为匹配元素的click事件绑定多个事件处理函数。每次触发click事件时,toggle()函数会轮流执行其中的一个事件处理函数。(jQuery还有一个同名的toggle()函数,用于切换元素的显示/隐藏。)
例如,我们使用toggle("click", A, B, C)为元素的click事件绑定了3个事件处理函数A、B、C。第一次点击执行A,第二次点击执行B,第三次点击执行C,第四次点击又执行A,第五次点击又执行B ……(如果调用了多次toggle(),它们之间是独立的)。删除通过toggle()绑定的事件,使用unbind()函数。例如:unbind("click")。
(从1.8开始被标记为已过时,并从1.9开始被移除。)

function handle1(){
 alert("click1");
}
function handle2(){
 alert("click2");
}
function handle3(){
 alert("click3");
}
function handle4(){
 alert("click4");
}
$("#btn1").toggle(handle1,handle2,handle3,handle4); //可循环切换 <body>
 <div id="n1">
 <p id="n2"><span>CodePlayer</span></p>
 <p id="n3"><span>qinqin</span></p>
 <em id="n4">http://www.365mini.com</em>
 </div>
 <p>id="n5">Google</p>
<input id="btn1" type="button" value="点击1" />
<input id="btn2" type="button" value="点击2" />
<a id="a1" href="#">CodePlayer</a>
 <input id="btn" type="button" value="点击绑定一次" />
 <div id="n2">
 <p id="n6"><span>CodePlayer</span></p>
 <p id="n7"><span>qinqin</span></p>
 </div>
<div id="log"><div>
</body>