• jQuery中四个绑定事件的区别 on,bind,live,delegate


    1.jQ操作DOM元素的绑定事件的四种方式
           jQ中提供了四种事件监听方式,bind、live、delegate、on,对应的解除监听的函数分别是unbind,die,undelegate,off

    2.bind
          $(selector).bind(event,data,function)
          event:事件,必选,一个或多个事件;data:参数,可选; fn:绑定事件发生时执行的函数,必选
          bind()是最直接的,存在最久的绑定方法
          优点:兼容性好,任何浏览器都可以使用
         缺点:它会绑定事件到所有的目标元素上,有一个绑定一个,在页面上的元素不会动态添加的时候使用它没什么问题。但如果列表中动态增加一个元素,点击它是没有反应的,必须再bind一次才执行,所以效率不太高。 
        
        
    3.live
        $(selector).live(event,data,function)
        这个方法用到了事件委托的概念来处理事件的绑定
        优点:这里仅有一次的事件绑定,绑定到document上而不像.bind()那样给所有的
       元素挨个绑定,动态添加的元素仍然可以触发那些早先绑定的事件,因为事件真正的绑定是在document上

    4.delegate
         $(selector).delegate(childSelector,event,data,function)
          childSelector:selector的子元素,必须写的
         优点:可以选择把这个事件放在哪个元素上,需要迭代查找所有的selector/event data 来决定哪个子元素来匹配
        缺点:需要查找绑定的子元素,尽管比document少很多了,不过,你还是得浪费时间来查找。

    5.on
        其实.bind(),.live(),.delegate()都是通过.on()来实现的,.unbind(),.die(),.undelegate(),也是一样的都是通过.off()来实现的。
       优点:提供了一种统一绑定事件的方法
       缺点:也许会对你产生一些困扰,因为它隐藏了前面我们所介绍的三种方法的细节

    6.四种方式的异同和优缺点
         相同点:1.都支持单元素多事件的绑定;空格相隔方式或者大括号替代方式;
                        2.均是通过事件冒泡方式,将事件传递到document进行事件的响应
        比较和联系:
                       1.bind()函数只能针对已经存在的元素进行事件的设置;但是live(),on(),delegate()均支持对动态新添加元素的事件设置;
                       2.bind()支持jQ所有版本;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()差些

    7.结论
          用.bind(),把相同的一个事件处理机制用到所有匹配的DOM元素上;多事件处理:用空格分隔 $(selector).bind("click dbclick mouseout",data,function);
          live()已经被淘汰了
         .delegate()会提供很好的方法来提高效率,同时可以添加到动态创建的元素上
         .on()是整合了之前的3中方式的新事件绑定机制,我们可以用.on()来代替上述的3种方法

    参考文献:https://www.cnblogs.com/cxying93/p/6099496.html

  • 相关阅读:
    slqite3练习
    QStackedWidget 与 QStackedLayout 的用法区别
    pyqt5 菜单,工具栏,线程,matplotlib
    PyQt5 结合 matplotlib 时,如何显示其 NavigationToolbar
    tkinter事件高级用法实例
    tkinter菜单图标,工具栏
    tkinter界面卡死的解决办法
    8个经过证实的方法:提高机器学习模型的准确率
    结合Scikit-learn介绍几种常用的特征选择方法
    scikit-learn的主要模块和基本使用
  • 原文地址:https://www.cnblogs.com/yz26/p/10277402.html
Copyright © 2020-2023  润新知