您的位置：首页 > Web前端 > JQuery

jquery事件之事件委托和事件切换

2015-11-11 23:22 681 查看

一、事件委托函数：

方法名	说明	语法（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()函数用于为指定元素的一个或多个事件绑定事件处理函数。从jQuery1.7开始，该函数被标记为已过时；从jQuery1.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事件绑定事件处理函数
$("divp").live("click",function(){
alert($(this).text());
});
$("#n1").append('<pid="n6">上述绑定的click事件对此元素也生效!');//后添加的n6也可以触发上述click事件，因为它也是div中的p元素（与bind不一样）

vardata={id:1,name:"eric"};
vareventsMap={
"mouseenter":function(event){
$(this).html("你好!"+event.data.name);
},

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

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

"mouseleave":function(event){
$(this).html("再见!"+event.data.name);
}
};
$("div").delegate("#n3",eventsMap,data);/为n5绑定mouseentermouseleave两个事件（one和bind绑定方法可以不加上data，但是on和live和delegate要加上）
4.undelegate()函数用于移除元素上绑定的一个或多个事件的事件处理函数。undelegate()函数主要用于解除由delegate()函数绑定的事件处理函数。
//$("body").undelegate();
$body.undelegate(":button","click",btnClick2);

<body>
<divid="n1">
<pid="n2">CodePlayer
<pid="n3">qinqin
<emid="n4">http://www.365mini.com
</div>
id="n5">Google
<inputid="btn1"type="button"value="点击1"/>
<inputid="btn2"type="button"value="点击2"/>
<aid="a1"href="#">CodePlayer</a>
<inputid="btn"type="button"value="点击绑定一次"/>
<divid="n2">
<pid="n6">CodePlayer
<pid="n7">qinqin
</div>
<divid="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开始被移除。）
functionhandle1(){
alert("click1");
}
functionhandle2(){
alert("click2");
}
functionhandle3(){
alert("click3");
}
functionhandle4(){
alert("click4");
}
$("#btn1").toggle(handle1,handle2,handle3,handle4);//可循环切换

<body>
<divid="n1">
<pid="n2">CodePlayer
<pid="n3">qinqin
<emid="n4">http://www.365mini.com
</div>
id="n5">Google
<inputid="btn1"type="button"value="点击1"/>
<inputid="btn2"type="button"value="点击2"/>
<aid="a1"href="#">CodePlayer</a>
<inputid="btn"type="button"value="点击绑定一次"/>
<divid="n2">
<pid="n6">CodePlayer
<pid="n7">qinqin
</div>
<divid="log"><div>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航