jquery的on()、bind()、live()和delegate()区别

四个方法都能够为指定元素注册事件处理函数,但是区别也是很大的下面就简单介绍一下它们之间的有哪些主要的区别

一、bind()

$(‘a‘).bind(‘click‘, function() { alert("That tickles!") });  

这是最简单的绑定方法了。JQuery扫描文档找出所有的$(‘a’)元素,并把alert函数绑定到每个元素的click事件上。

二、on()

$(selector).on(type,[selector],[data],fn)

当第二个选择器省略的时候,使用方式和作用与bind()一致,第一个选择器匹配的元素本身和所有的子元素都能够触发绑定的事件,如果不省略第二个选择器,那么就会通过此选择器过滤能够触发事件的子元素,也就是只有第二个选择器匹配的元素才能够触发此事件。

三、live() 此方法在jQuery1.9中被移除了,完全可以使用on()来替代它的作用,不建议使用此方法。

    $(‘a‘).live(‘click‘, function() { alert("That tickles!") });   

JQuery把alert函数绑定到$(document)元素上,并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节 点上,它就查看该事件是否是一个click事件,以及该事件的目标元素与’a’这一CSS选择器是否匹配,如果都是的话,则执行函数。
  live方法还可以被绑定到具体的元素(或“context”)而不是document上,像这样:

    $(‘a‘, $(‘#container‘)[0]).live(...);   

四、delegate()

$(‘#container‘).delegate(‘a‘, ‘click‘, function() { alert("That tickles!") });

JQuery扫描文档查找$(‘#container’),并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定 到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上,它就查看该事件是否是click事件,以及该事件的目 标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。
  可以注意到,这一过程与.live()类似,但是其把处理程序绑定到具体的元素而非document这一根上。精明的JS’er们可能会做出这样的结
论,即$(‘a‘).live() == $(document).delegate(‘a‘),是这样吗?嗯,不,不完全是。

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

    $(‘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选择器做操作,这使得它变得非常的不灵活。
  欲了解更多关于CSS选择器的缺点,请参阅Exploring jQuery .live() and .die()一文。
  更新:感谢Hacker News上的pedalpete和后面评论中的Ellsass提醒我加入接下来的这一节内容。

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

  毕竟,bind看起来似乎更加的明确和直接,难道不是吗?嗯,有两个原因让我们更愿意选择delegate或live而不是bind:
  1、为了把处理程序附加到可能还未存在于DOM中的DOM元素之上。因为bind是直接把处理程序绑定到各个元素上,它不能把处理程序绑定到还未存在于页面中的元素之上。
  2、如果你运行了$(‘a’).bind(…),而后新的链接经由AJAX加入到了页面中,则你的bind处理程序对于这些新加入的链接来说是无效
的。而另一方面live和delegate则是被绑定到另一个祖先节点上,因此其对于任何目前或是将来存在于该祖先元素之内的元素都是有效的。
  3、或者为了把处理程序附加到单个元素上或是一小组元素之上,监听后代元素上的事件而不是循环遍历并把同一个函数逐个附加到DOM中的100个元素
上。把处理程序附加到一个(或是一小组)祖先元素上而不是直接把处理程序附加到页面中的所有元素上,这种做法带来了性能上的好处。

停止传播

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

[javascript] view plaincopy

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

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

***************on()、delegate()*************

on()

$("#box").on("click","input",function(){
  $("#inner").html(this.id)
})

delegate()

$("#box").delegate("input","click",function(){
  $("#inner").html(this.id)
})

现在推荐使用on()来替代上其余几个函数,这是有好处,第一个能够统一接口,第二个可以提高性能。

时间: 2024-10-16 16:15:04

jquery的on()、bind()、live()和delegate()区别的相关文章

bind() live()和delegate 区别

Event bubbling (aka event propagation)冒泡 我们的页面可以理解为一棵DOM树,当我们在叶子结点上做什么事情的时候(如click一个a元素),如果我们不人为的设置stopPropagation(Moder Browser), cancelBubble(IE),那么它的所有父元素,祖宗元素都会受之影响,它们上面绑定的事件也会产生作用.看一个示例: $('a').bind('click', function() { alert("That tickles!&quo

jquery中的bind()、live()的区别与使用(事件处理)

使用jquery有一段时间了,刚开始看别人的源代码的时候对事件的绑定方法有疑惑.比如: var btn=$("#button"); btn.click(function(){ alert("I have been clicked!"); }); 这就绑定了一个click事件. 1.bind()方法解析 但后来发现jqueryAPI里面还有bind方法,一直没有使用过,查看API的使用方法: $("p").bind("click"

jQuery中的bind() live() delegate()之间区别分析

jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click',function (){ alert('click'); }) 解析:这种方式最简单,jq扫描文档找出所有的a,让将函数绑定到每个元素的click事件上 2.live方式 $('a').live('click',function (){ alert('click'); }) 解析:jq将函数绑定到$

关于jquery中的bind()、live()、delegate()的区别分析浅析

近来在研究JS的时候,小码哥又一次看到jquery中常见的几种绑定事件的方法:bind(),live(),delegate().因此,闲来无事,想把他们几个做一下系统的分析,一遍后面的码农们能够一起分享! 先说好,鄙人也算是JS的初学者,很复杂的模块啥的,也是略懂而已,要是有码神看到,可别Ma我哈!! 那好,下面就直接进入主题了~ 首先,分别介绍一下这三个方法: 1.bind()--$(selector).bind(event,data,function);     event 为必需,规定添加

jquery on、bind、delegate方法简单总结

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="./jquery/jquery-1.11.3.min.js"></script></head> <div class="pop"

Jquery绑定事件(bind和live的区别)

Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function(){}); (3)target.live("click",function(){}); 第一种方法很好理解,其实就和普通JS的用法差不多,只是少了一个on而已 第二.三种方法都是绑定事件,但是二者又有很大的不同,下面着重讲解一下,因为这个如果用到Jquery的框架的话是用的挺多的,尤其要

Jquery中bind和live的区别

Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function(){}); (3)target.live("click",function(){}); 第一种方法很好理解,其实就和普通JS的用法差不多,只是少了一个on而已 第二.三种方法都是绑定事件,但是二者又有很大的不同,下面着重讲解一下,因为这个如果用到Jquery的框架的话是用的挺多的,尤其要

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

click(),bind(),live()都是执行事件时使用的方法 1.click()单击事件方法: $("a").click(function() { alert("hello"); }); 2.在bind()中,jQuery所有JavaScript事件对象,比如focus, mouseover, 和 resize,都是可以作为type参数传递进来的. var message = "left"; $("a").bind(&q

jQuery的.click,.bind,.unbind,.on,.off,.delegate,.undelegate

.click与.bind .click和.bind都是给每个元素绑定事件,对于只绑定一个click事件,.bind事件的简写就是.click那种方式. 这两种方式都会出现两个问题: 第一个问题,如果要绑定的事件特别多,比如要绑定100个元素,要绑定100次,对于大量元素来说,影响到了性能.但是如果是id选择器,因为id唯一,用bind()方法就很快捷了. 第二个问题,对于尚未存在的元素,无法绑定.动态添加一个span元素,点击这个span元素,会发现没有动作响应. 那么你就会问,为什么要出现.b

!!!jQuery中事件绑定 推荐使用.delegate()或者live()

jQuery中的.bind()..live()和.delegate()之间区别分析 参考:http://www.jb51.net/article/27309.htm DOM树   首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的HTML页面看起来就像是这个样子 事件冒泡(又称事件传播) 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行. 复制代码代码如下: $('a').bind('click',function(){al