在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
  1.  

jQuery中的事件绑定方法的更多相关文章

  1. Jquery中的事件绑定$("#btn").bind("click",function(){ })

    Jquery中的事件绑定:$("#btn").bind("click",function(){  }) 由于每次都这么调用太麻烦,所以jquery就用$(&qu ...

  2. jQuery 中的事件绑定

    一.事件概念 和数据库中的触发器一样,当操作了数据的时候会引发对应的触发器程序执行 一样,JS 中的事件就是对用户特定的行为作出相应的响应的过程,其实上就是浏览器 监听到用户的某些行为的时候会执行对应 ...

  3. jQuery 中的事件绑定与取消绑定

    1:在jQuery中使用bind方法进行事件的绑定,bind方法有两个参数,第一个参数是事件的类型例如click,change,keyup,keydown,blur,focus等.第二个参数是一个回调 ...

  4. jQuery中是事件绑定方式--on、bind、live、delegate

    概述:jQuery是我们最常用的js库,对于事件的绑定也是有很多种,on.one.live.bind.delegate等等,接下来我们逐一来进行讲解. 本片文章中事件所带的为版本号,例:v1.7+为1 ...

  5. js和jQuery中的事件绑定与普通事件

    普通事件,是指直接对元素进行事件注册,然后触发 而事件绑定是将事件注册到元素上 两者区别就是在于普通事件不可以重复添加多个事件,若添加也会覆盖,只会触发其中一个事件(最后注册的那个) 而事件绑定是可以 ...

  6. 关于jquery中的事件绑定bind()和live()

    live可以说是bind是方法的变种. 二者的主要区别就是live方法的作用机理是事件委托,live方法的作用机理是将事件绑定DOM的根节点上. live方法的处理机制就是把事件绑定在DOM树的根节点 ...

  7. jQuery中的事件绑定的几种方式

    jQuery目前有on(),bind(),delegate(),live()四种绑定方式,但是随着版本的不断更新,有的方式也相应的被淘汰掉 [band()方式绑定] 3.0版本之前的绑定方式比较常用的 ...

  8. jQuery学习笔记(三)jQuery中的事件

    目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一.加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...

  9. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

随机推荐

  1. mybase 用户教程

    一.安装.卸载 1.安装 在Mac OS X环境下,可通过打开下载的.dmg文件,再把myBase图标拖到应用程序文件夹即可安装.然后通过双击程序图标运行程序 2.卸载 对于Mac OS X,把myB ...

  2. http://875880923.iteye.com/blog/1963400

    已经接触了一段时间的ACM(详见百度百科)了,每回刷杭电oj的题累了的时候,就喜欢去看Ranklist里面的排名,看看前面的牛人的格言,让自己有一点憧憬.有一天突然好奇杭电上的人做的总题数的数量与人数 ...

  3. 使用axis开发web service服务端

    一.axis环境搭建 1.安装环境 JDK.Tomcat或Resin.eclipse等. 2.到 http://www.apache.org/dyn/closer.cgi/ws/axis/1_4下载A ...

  4. python 多环境安装

    1.pyenv 安装 curl -L https://raw.githubusercontent.com/yyuu/pyenv-installer/master/bin/pyenv-installer ...

  5. KVC 和 KVO

    KVC 键值编码    全称是Key-value coding,翻译成键值编码.它提供了一种使用字符串而不是访问器方法去访问一个对象实例变量的机制.        1.通过key(成员变量的名称)设置 ...

  6. Javascript设计模式学习二(单例)

    定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点 普通的单例模式: 使用一个变量来标记当前是否已经为某个类创建过对象,如果是的话,在下一次获取该类的实例时,直接返回之前创建的对象.比如:使用 ...

  7. php curl 多线程方法

    <?php /** * curl 多线程 * @param array $array 并行网址 * @param int $timeout 超时时间 * @return array */ fun ...

  8. jsonp 实例

    一直以为很复杂吧?其实很简单,简单到你不敢相信 1.前端引好jquery文件 2.前端代码: $.ajax({       url: 'http://www.xxxxxxxx.com/expand.a ...

  9. 【Android自学日记】使用DatePicker以及TimePicker显示当前日期和时间

    DatePicker 1.获取一个日历对象: Calendar cal=Calendar.getInstance(); 2.获取当前日期及时间: int year=cal.get(Calendar.Y ...

  10. c#泛型的使用[转]

    在2005年底微软公司正式发布了C# 2.0,与C# 1.x相比,新版本增加了很多新特性,其中最重要的是对泛型的支持.通过泛型,我们可以定义类型安全的数据结构,而无需使用实际的数据类型.这能显著提高性 ...