zoukankan      html  css  js  c++  java
  • jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on()。

    那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点。

      在了解这些之前,首先要知道,不管你用的是(live/ bind / delegate)之中那个方法,最终都是jQuery底层都是调用on方法来完成最终的事件绑定;.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的;

      因此从某种角度来讲除了在书写的方便程度及习惯上挑选,不如直接都采用on方法来的痛快和直接

      所以在新版的API中都这么写到:

        .on()方法事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中,.on()方法 提供绑定事件处理的所有功能

    .bind() :没有事件委托机制。

    .live() : 高版本的jQuery不支持.live()方法,所以该方法应该少使用。不支持链式调用。

    .delegate : $( elements ).delegate( selector, events, data, handler );

    .on : $( elements ).on( events, [selector], data, handler ); 


    注意:
      .delegate 和 .on()的参数的顺序区别
     

    总结:

    • 在下列情况下,应该使用.live()或.delegate(),而不能使用.bind():

        为DOM中的很多元素绑定相同事件;

        为DOM中尚不存在的元素绑定事件;

    • 用.bind()的代价是非常大的,它会把相同的一个事件处理程序hook到所有匹配的DOM元素上
    • 不要再用.live()了,它已经不再被推荐了,而且还有许多问题
    • .delegate()会提供很好的方法来提高效率,同时我们可以添加一事件处理方法到动态添加的元素上

    我们可以用.on()来代替上述的3种方法

    不足点也是有的:

    • 并非所有的事件都能冒泡,如load, change, submit, focus, blur
    
    
    
  • 相关阅读:
    设计模式-抽象工厂模式
    设计模式-工厂方法模式
    设计模式-简单工厂模式
    设计模式-代理模式
    Retrofit原理学习
    Google Flutter的学习与使用
    Robolectric结合Android Studio的使用
    Android中app的启动步骤
    汽车系统实现--增加数据和删除数据
    vue--实现跑马灯效果
  • 原文地址:https://www.cnblogs.com/summer0319/p/6247049.html
Copyright © 2011-2022 走看看