zoukankan      html  css  js  c++  java
  • 再谈jQuery中.live()和.delegate()之间的区别

         之前看了这篇文章《The Difference Between jQuery’s .bind(), .live(), and .delegate()》一文,觉得自己已经完全理解了.live() 和.delagate(),直到遇到了一个另一个问题,发现还是有遗漏。

         先再补充下知识,简单讲讲两者之间的区别:

         .live()

    $('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()好用

         基于几个原因,人们通常更愿意选用jQuery的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()》一文。

         以上是我在网上找到的介绍.live()和.delegate()区别的资料,相信大家对此应该有了大致的了解,那我们再来看下以下的应用场景:

    <!DOCTYPE>
    <html>
        <head>
         <script src="http://code.jquery.com/jquery-latest.js"></script>
        </head>
    <body>
        <div>
            <span class="cb">
              <a href="./xxxxxx">相关链接</a>
            </span>
        </div>
    
        <script type="text/javascript">
            $('.ca a').live("click", function (event) {
              location.href = 'ca.html';
              return false;
            });
            $('div').delegate(".cb a", "click", function (event) {
                location.href = 'cb.html';
                return false;
            });    
        </script>
    </body>
    </html>

         以上代码是在一个连接中绑定了两个事件,跳转到不同的页面。(真正项目中,这种例子明显是个bug,不过在多人同时开发一个项目时,这种情况还是可能出现,每个开发者都根据id或者class来绑定事件,在不小心时会出现重叠)。ok,那大家觉得这种应用场景,当用户点击了那个连接时,是会跳转到ca.html?还是cb.html,也就是先触发live事件,还是delegate事件?

         好,揭晓答案:是delegate事件,因为delegate是绑定在div上,而live是绑定在document上。当事件冒泡时,因此会先触发delegate事件。

        

     参考文章:

    http://kb.cnblogs.com/page/94469/

    http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

  • 相关阅读:
    js 常用正则表达式
    深度学习
    开通自动订阅功能前:输入银行业务信息
    VUE学习九,生命周期
    Setting Windows server firewall by powershell
    Install iis web server using powershell
    转 FAL[server, ARC3]: FAL archive failed Error 16401 creating standby archive log file at host
    springboot admin 监控
    二进制手指计数法
    SpringBoot集成Swagger-Bootstrap-UI
  • 原文地址:https://www.cnblogs.com/lengyuhong/p/2550178.html
Copyright © 2011-2022 走看看