zoukankan      html  css  js  c++  java
  • 关于jquery中的事件绑定bind()和live()

    live可以说是bind是方法的变种。

    二者的主要区别就是live方法的作用机理是事件委托,live方法的作用机理是将事件绑定DOM的根节点上。

    live方法的处理机制就是把事件绑定在DOM树的根节点上,而不是直接绑定在某个元素上。举一个例子来说明:

                  $(".clickMe").live("click",fn);

                 $("body").append("<div class='clickMe'>测试live方法的步骤</div>");

        当我们点击这个新增的元素时会依次发生如下步骤:

          (1)生成一个click事件,传递给div来做处理

          (2)由于没有事件直接绑定在div上,所以事件直接冒泡到DOM树上

          (3)事件不断冒泡,直到DOM树的根节点上,默认情况下,根节点上就绑定了这个click事件

          (4)执行由live绑定的click事件

          (5)检测绑定事件的对象是否存在,判断是否需要继续执行绑定的事件。检测事件对象是通过检测 

                  $(event.target).closest('.clickMe') 能否找到匹配的元素来实现的。

         (6)通过(5)的测试,如果绑定事件的对象存在的话,就执行绑定的事件。

          由于只有在事件发生的时候,live方法才会去检测绑定事件的对象是否存在,所以live方法可以实现后来新增的元素也可实现事件的绑定。相比之下,bind会在事件在绑定阶段就会判断绑定事件的元素是否存在,而且只针对当前元素进行绑定,而不是绑定到父节点上。

    所以bind是只能对当前存在的元素绑定事件,l对后来新增的元素无效。live对后来新增的元素也是有效的。

  • 相关阅读:
    写了一个html5音乐播放器
    跨站脚本攻击之反射型XSS漏洞
    org.hibernate.ObjectNotFoundException异常一则
    addEventListener第二个参数的handleEvent
    IE的fireEvent方法
    DexMongoDB索引优化工具
    javascript 位运算符
    javascript contains方法来判断元素包含关系
    将uglifyjs添加到鼠标右键菜单
    过滤XSS(跨站脚本攻击)的函数和防止svn版本库被浏览
  • 原文地址:https://www.cnblogs.com/lihongfei0602/p/4060129.html
Copyright © 2011-2022 走看看