您的位置：首页 > 其它

click() bind() live() delegate()区别

2014-01-20 14:13 169 查看

click()，bind()，live()都是执行事件时使用的方法，他们之前是有一些区别的，我们在使用这些方法时应该根据需要进行选择。

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

$("a").bind("click",function(){alert("ok");});

live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的

$("a").live("click",function(){alert("ok");});

delegate(selector,[type],[data],fn) 指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数

$("#container").delegate("a","click",function(){alert("ok");})

on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数

差别：

.bind()是直接绑定在元素上

.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。

.delegate()则是更精确的小范围使用事件代理，性能优于.live()

.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制

1.click()方法是我们经常使用的单击事件方法：

Js代码

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
$("a").click(function() {
alert("hello");
});
})
</script>

当点击<a>时，输出hello。

2.click()方法是bind()方法的一种简单方法。在bind()中，jQuery所有JavaScript事件对象，比如focus, mouseover, 和 resize，都是可以作为type参数传递进来的。我们直接看看jQuery文档中的一个例子：

Js代码

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
var message = "left";
$("a").bind("click", function() {
alert(message);
return false;
});

var message = "right";
$("a").bind("contextmenu", function() {
alert(message);
return false;
});
})
</script>

上边代码中，无论是左键单击还是右键单击<a>输出总是"right"。为了解决这个问题，我们可以将message作为data参数传递到到bind()方法中，如下：

Js代码

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
var message = "left";
$("a").bind("click", { msg: message }, function(e) {
alert(e.data.msg);
return false;
});

var message = "right";
$("a").bind("contextmenu", { msg: message }, function(e) {
alert(e.data.msg);
return false;
});
})
</script>

这样当我们左键单击<a>时，输出"left"；当右键单击<a>时，输出"right"。

可见，一般情况下我们使用click()方法就可以了，当需要处理上边这种情况时，我们要使用bind()方法。

他还可以同时绑定多个时间：

Html代码

<html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script> $(function(){ var message = "left"; $("a").bind("click", { msg: message }, function(e) { alert(e.data.msg); return false; }); var message = "right"; $("a").bind("contextmenu", { msg: message }, function(e) { alert(e.data.msg); return false; }); //同时绑定多个事件类型/处理程序 $("span").bind({ click:function(){$("p").slideToggle();}, mouseover:function(){$("body").css("background-color","red");}, mouseout:function(){$("body").css("background-color","#FFFFFF");} }); //你可以在事件处理之前传递一些附加的数据。 function handler(event) { alert(event.data.foo); } $("p").bind("click", {foo: "bar"}, handler) }) </script> <style>.entered{background:gray;}</style> </head> <body> <a href="##">==== tester ====</a> <span><<<< control-p >>>></span> <p style="height:200px;border:red 1px solid;" id="#foo">this is a test...</p> </body> </html>

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
var message = "left";
$("a").bind("click", { msg: message }, function(e) {
alert(e.data.msg);
return false;
});

var message = "right";
$("a").bind("contextmenu", { msg: message }, function(e) {
alert(e.data.msg);
return false;
});

//同时绑定多个事件类型/处理程序
$("span").bind({
click:function(){$("p").slideToggle();},
mouseover:function(){$("body").css("background-color","red");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
});

//你可以在事件处理之前传递一些附加的数据。
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
})

</script>
<style>.entered{background:gray;}</style>
</head>

<body>
<a href="##">==== tester ====</a>
<span><<<< control-p >>>></span>
<p style="height:200px;border:red 1px solid;" id="#foo">this is a test...</p>
</body>
</html>

3.live()给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。如下：

Js代码

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
$("div.live").bind("click", function() {
alert("success");
});
})
</script>

此时，当点击class为live的div时，输出"success"。此时如果有一个新的元素添加了进来，如下：

Js代码

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
$("<div class="live" href="#">live</div>").appendTo("body");
})
</script>

这时，当使用上边方法点击class为live的a标签时，不会执行。原因在于，这个元素是在调用bind()之后添加的，而使用live()方法使得在后边添加的元素也能够执行相应的事件，如下：

Js代码

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
$("div.live").live("click", function() {
alert("success");
});
})
</script>

这样，当我们单击class为live的a标签时，如果此a标签是后边添加的，也能照常输出"success"。至于原因，在这里不做具体的说明，本篇主要比较几种方法的区别。

最后，看看delegate()方法，这个方法到目前为止我自己还没有使用过，应该是在1.4.2中才有的。

live()方法的一个不足在于它不支持链式写法：

Js代码

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
$("#test").children("a").live("mouseover", function() {
alert("hello");
});
})
</script>

上边这种写法并不会输出，我们使用delegate()可以写为：

Js代码

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
$("#test").delegate("a", "mouseover", function() {
alert("hello");
});
})
</script>

这样就可以正常的输出我们想要的结果了。本篇总结了click()、bind()、live()和delegate()方法，其中并没有做非常详细的解释，仅望能对大家在具体使用时有所帮助。

原文：jQuery方法区别(四)click()
bind() live() delegate()区别

.delegate()

Js代码

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
$('#container').delegate('a', 'click', function() { alert("That tickles!") });
})
</script>

JQuery扫描文档查找$(‘#container’)，并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上，它就查看该事件是否是click事件，以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话，它就执行函数。

　　可以注意到，这一过程与.live()类似，但是其把处理程序绑定到具体的元素而非document这一根上。精明的JS’er们可能会做出这样的结论，即$('a').live() == $(document).delegate('a')，是这样吗?嗯，不，不完全是。

　　为什么.delegate()要比.live()好用

　　基于几个原因，人们通常更愿意选用jQuery的delegate方法而不是live方法。考虑下面的例子：

Js代码

$('a').live('click', function() { blah() }); // 或者 $(document).delegate('a', 'click', function() { blah() });

$('a').live('click', function() { blah() });
// 或者
$(document).delegate('a', 'click', function() { blah() });

　　速度

　　后者实际上要快过前者，因为前者首先要扫描整个的文档查找所有的$(‘a’)元素，把它们存成jQuery对象。尽管live函数仅需要把’a’作为串参数传递以用做之后的判断，但是$()函数并未知道被链接的方法将会是.live()。

　　而另一方面，delegate方法仅需要查找并存储$(document)元素。

　　一种寻求避开这一问题的方法是调用在$(document).ready()之外绑定的live，这样它就会立即执行。在这种方式下，其会在DOM获得填充之前运行，因此就不会查找元素或是创建jQuery对象了。

　　灵活性和链能力

　　live函数也挺令人费解的。想想看，它被链到$(‘a’)对象集上，但其实际上是在$(document)对象上发生作用。由于这个原因，它能够试图以一种吓死人的方式来把方法链到自身上。实际上，我想说的是，以$.live(‘a’,…)这一形式作为一种全局性的jQuery方法，live方法会更具意义一些。

　　仅支持CSS选择器

　　最后一点，live方法有一个非常大的缺点，那就是它仅能针对直接的CSS选择器做操作，这使得它变得非常的不灵活。

　　为什么选择.live()或.delegate()而不是.bind()

　　毕竟，bind看起来似乎更加的明确和直接，难道不是吗?嗯，有两个原因让我们更愿意选择delegate或live而不是bind：

　　为了把处理程序附加到可能还未存在于DOM中的DOM元素之上。因为bind是直接把处理程序绑定到各个元素上，它不能把处理程序绑定到还未存在于页面中的元素之上。

　　如果你运行了$(‘a’).bind(…)，而后新的链接经由AJAX加入到了页面中，则你的bind处理程序对于这些新加入的链接来说是无效的。而另一方面live和delegate则是被绑定到另一个祖先节点上，因此其对于任何目前或是将来存在于该祖先元素之内的元素都是有效的。

　　或者为了把处理程序附加到单个元素上或是一小组元素之上，监听后代元素上的事件而不是循环遍历并把同一个函数逐个附加到DOM中的100个元素上。把处理程序附加到一个(或是一小组)祖先元素上而不是直接把处理程序附加到页面中的所有元素上，这种做法带来了性能上的好处。

　　停止传播

　　最后一个我想做的提醒与事件传播有关。通常情况下，我们可以通过使用这样的事件方法来终止处理函数的执行：

Js代码

$('a').bind('click', function(e) { 　　e.preventDefault(); 　　// 或者　　e.stopPropagation(); });

$('a').bind('click', function(e) {
　　e.preventDefault();
　　// 或者
　　e.stopPropagation();
});

　　不过，当我们使用live或是delegate方法的时候，处理函数实际上并没有在运行，需要等到事件冒泡到处理程序实际绑定的元素上时函数才会运行。而到此时为止，我们的其他的来自.bind()的处理函数早已运行了。

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

标签：

相关文章推荐

新的分享

章节导航