zoukankan      html  css  js  c++  java
  • jQuery绑定事件的四种方式:bind、live、delegate、on

    1、jQuery操作DOM元素的绑定事件的四种方式

      jQuery中提供了四种事件监听方式,分别是bind、live、delegate、on,对应的解除监听的函数分别是unbind、die、undelegate、off。

    2、必备的基础知识: DOM树

      示例,这是在browser环境下的一棵模拟DOM树:

    HTML DOM Structure

      

      我们的页面可以理解为一棵DOM树,当我们在叶子结点上做什么事情的时候(如click一个a元素),如果我们没有人为的设置stopPropagation(Moder Browser),  

      cancelBubble(IE), //阻止传播(现代的浏览器),取消冒泡(ie浏览器),那么它的所有父元素,祖宗元素都会受之影响,绑定的事件也对它们产生作用。

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

      当我们点击a,首先会触发它本身所绑定的click事件,然后会一路往上,触发它的父元素,祖先元素上所有绑定的click事件:

    HTML DOM Structure

    3、bind

      $(selector).bind(event,data,function)

      event:事件,必选,一个或多个事件;  data:参数,可选;  fn:绑定事件发生时执行的函数,必选。

      bind()是最直接的、存在最久的绑定方法。

      优点:这个方法提供了一种在不同浏览器中对事件处理的兼容性解决方案。

      缺点:它会绑定事件到所有的目标元素上,有一个绑一个,在页面上的元素不会动态添加的时候使用它没什么问题。

           但如果列表中动态增加一个“列表元素5”,点击它是没有反应的,必须再bind一次才行。也就是说,它不会绑定到在它执行完后动态添加的那些元素上。

         当元素很多时,会出现效率问题。当页面加载完的时候,你才可以进行bind(),所以可能产生效率问题。

    4、live

      $(selector).live(event,data,function)

      这个方法用到了事件委托的概念来处理事件的绑定。

      优点:这里仅有一次的事件绑定,绑定到document上而不像.bind()那样给所有的元素挨个绑定。

           那些动态添加的元素依然可以触发那些早先绑定的事件,因为事件真正的绑定是在document上

         你可以在document ready之前就可以绑定那些需要的事件。

    5、delegate

      $(selector).delegate(childSelector,event,data,function)

      childSelector:selector的子元素,必需项。

      delegate()有点像live(),不同于.live()的地方在于,它不会把所有的event全部绑定到document,而是由你决定把它放在哪儿。

      优点:你可以选择你把这个事件放到那个元素上了。

             需要迭代查找所有的selector/event data来决定那个子元素来匹配,但是因为你可以决定放在那个根元素上,所以可以有效的减小你所要查找的元素。

         可以用在动态添加的元素上。

      缺点:需要查找绑定的子元素,尽管比document少很多了,不过,你还是得浪费时间来查找。

    6、on

      其实.bind(), .live(), .delegate()都是通过.on()来实现的,.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的,

        优点:提供了一种统一绑定事件的方法。

      缺点:也许会对你产生一些困扰,因为它隐藏了前面我们所介绍的三种方法的细节。

    7、四种方式的异同和优缺点

      相同点:1.都支持单元素多事件的绑定;空格相隔方式或者大括号替代方式;

           2.均是通过事件冒泡方式,将事件传递到document进行事件的响应;

      比较和联系:

          1.bind()函数只能针对已经存在的元素进行事件的设置;但是live(),on(),delegate()均支持对未来新添加元素的事件设置;

          2.bind()支持Jquery所有版本;live()支持jquery1.8-;delegate()支持jquery1.4.2+;on()支持jquery1.7+;

           bind()函数在jquery1.7版本以前比较受推崇,1.7版本出来之后,官方已经不推荐用bind(),替代函数为on(),这也是1.7版本新添加的函数,

           同样,可以用来代替live()函数,live()函数在1.9版本已经删除;

           3.live()函数和delegate()函数两者类似,但是live()函数在执行速度,灵活性和CSS选择器支持方面较delegate()差些;

    8、结论

          用.bind()的代价是非常大的,它会把相同的一个事件处理程序hook到所有匹配的DOM元素上。【bind:直接绑定到元素上,有一个绑一个。

          不要再用.live()了,它已经不再被推荐了。

          .delegate()会提供很好的方法来提高效率,同时我们可以添加到动态创建的元素上。

           .on()是整合了之前的3种方式的新事件绑定机制,我们可以用.on()来代替上述的3种方法。

     9、绑定多事件的处理

          单事件处理:例如 $(selector).bind("click",data,function);

          多事件处理:

              1.利用空格分隔多事件,例如 $(selector).bind("click dbclick mouseout",data,function);

                2.利用大括号灵活定义多事件,例如 $(selector).bind({event1:function, event2:function, ...})          

             空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数的情况;

           大括号替代方式:绑定较为灵活,可以给事件单独绑定函数。 

    参考文献:

      http://www.cnblogs.com/xilipu31/p/4105794.html

      http://blog.csdn.net/panfang/article/details/21705681

      http://www.cnblogs.com/piercalex/archive/2013/03/30/2990679.html

      http://www.51edu.com/it/bckf/35687.html

      

  • 相关阅读:
    vue2 在methods 中无法获取this对象
    mysql-set
    laravel 模板
    laravel save() 返回 null
    如何设置电脑允许远程访问并修改电脑用户密码?
    laravel报错:Unable to detect application namespace.
    b站操作系统2程序的顺序执行与并发执行
    b站计算机网络谢希仁4物理层
    b站计算机网络谢希仁2性能
    b站J数据库13之封装通用的增删改查方法
  • 原文地址:https://www.cnblogs.com/cxying93/p/6099496.html
Copyright © 2011-2022 走看看