$(selector).bind(event,data,function)
$(selector).live(event,data,function)//jquery1.9版本以下支持,jquery1.9及其以上版本删除了此方法,jquery1.9以上版本用on()方法来代替
$(selector).delegate(childSelector,event,data,function)//jquery1.4.2及其以上版本;
$(selector).on(event,childselector,data,function)//jquery1.7及其以上版本;jquery1.7版本出现之后用于替代bind(),live()绑定事件方式;

event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;

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

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

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

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

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

data:可选;需要传递的参数;

function:必需;当绑定事件发生时,需要执行的函数;适用所有版本,但是根据官网解释,自从jquery1.7版本以后bind()函数推荐用on()来代替。
 
 
1、.bind()是直接绑定在元素上,也很好的解决了浏览器在事件处理中的兼容问题。如果不人为的设置stopPropagation(Moder Browser), cancelBubble(IE),那么它的所有父元素,祖宗元素都会受之影响
$('a').bind('click', function() { alert("That tickles!") });

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

/* The .bind() method attaches the event handler directly to the DOM
element in question ( "#members li a" ). The .click() method is
just a shorthand way to write the .bind() method. */ $( "#members li a" ).bind( "click", function( e ) {} );
$( "#members li a" ).click( function( e ) {} );

.click(), .hover()...这些非常方便的事件绑定,都是bind的一种简化处理方式。对于利用ID选出来的元素是非常好的,不仅仅是很快的可以hook上去(因为一个页面只有一个id),而且当事件发生时,handler可以立即被执行(相对于后面的live, delegate)实现方式

缺点:

  • 它会绑定事件到所有的选出来的元素上
  • 它不会绑定到在它执行完后动态添加的那些元素上
  • 当元素很多时,会出现效率问题
  • 当页面加载完的时候,你才可以进行bind(),所以可能产生效率问题

2、.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。一旦事件冒泡到document上,jQuery将会查找selector/event metadata,然后决定那个handler应该被调用。当handler在执行的时候,因为有冒泡的参与,确实会有一些延迟,但是绑定的时候是特别的快。和.bind()相比的时候有一个好处就是我们不需要在每个元素上再去绑定事件,而只在document上绑定一次就可以了。尽管这个不是最快的方式,但是确实是最少浪费的。

优点:

  • 这里仅有一次的事件绑定,绑定到document上而不像.bind()那样给所有的元素挨个绑定
  • 那些动态添加的elemtns依然可以触发那些早先绑定的事件,因为事件真正的绑定是在document上
  • 你可以在document ready之前就可以绑定那些需要的事件

缺点:

  • 从1.7开始已经不被推荐了,所以你也要开始逐步淘汰它了。
  • Chaining没有被正确的支持
  • 当使用event.stopPropagation()是没用的,因为都要到达document
  • 因为所有的selector/event都被绑定到document, 所以当我们使用matchSelector方法来选出那个事件被调用时,会非常慢
  • 当发生事件的元素在你的DOM树中很深的时候,会有performance问题

3、.delegate()则是更精确的小范围使用事件代理,性能优于.live()。它不会把所有的event全部绑定到document,而是由你决定把它放在哪儿。而和.live()相同的地方在于都是用event delegation.

 优点:
  • 你可以选择你把这个事件放到那个元素上了
  • chaining被正确的支持了
  • jQuery仍然需要迭代查找所有的selector/event data来决定那个子元素来匹配,但是因为你可以决定放在那个根元素上,所以可以有效的减小你所要查找的元素。
  • 可以用在动态添加的元素上

缺点:

  • 需要查找那个那个元素上发生了那个事件了,尽管比document少很多了,不过,你还是得浪费时间来查找。
4、.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制。.bind(), .live(), .delegate()都是通过.on()来实现的,.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的。

jQuery中.bind() .live() .delegate() .on()区别的更多相关文章

  1. jQuery 中bind(),live(),delegate(),on() 区别(转)

    当我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 准备知识: 当我们在开始的时候,有些知识是必须具备的: D ...

  2. 转 jQuery 中bind(),live(),delegate(),on() 区别

    当我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 准备知识: 当我们在开始的时候,有些知识是必须具备的: D ...

  3. jquery实现input输入框实时输入触发事件代码 ---jQuery 中bind(),live(),delegate(),on() 区别

    复制代码 代码如下: <input id="productName" name="productName" value="" /> ...

  4. jQuery 中bind(),live(),delegate(),on() 区别

    on()来改写通过 .bind(), .live(), .delegate()所注册的事件 /* The jQuery .bind(), .live(), and .delegate() method ...

  5. Jquery中bind和live的区别

    Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function ...

  6. jQuery中bind,live,delegate与one方法的用法及区别解析

    bind( )方法用于将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象. .bind(eventType[, evnetData], Handler(eventObject)) 其中,参 ...

  7. jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画

    地狱的镰刀 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){ ...

  8. jquery中bind,live,delegate,on的区别

    这几种方法都是绑定事件用到的,但是他们之间有些差别 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 例如: <ul> <a href=" ...

  9. 【转】jQuery中.bind() .live() .delegate() .on()的区别

    bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert(& ...

随机推荐

  1. 如何在Ubuntu 14.04上利用jexus搭建支持php+mysql数据库的网站服务

      准备部分:sudo apt-get update          sudo apt-get install unzip -y第一部分:安装jexus    在终端运行以下命令    cd /tm ...

  2. java信任所有证书

    package com.eeepay.cashOut.util; import java.io.BufferedReader; import java.io.DataOutputStream; imp ...

  3. 升级Ghost

    环境:CentOS 6.3 [root@AY1406151605405725a8Z ghost]# ls -l total 108 -rw-rw-rw-  1 root root  1132 Sep ...

  4. 使用Jenkins部署.Net应用程序

    首先从 https://jenkins.io/download/ 下载所需的版本 这里选择Windows版本来测试. 直接安装jenkins.msi,安装完后使用Win+R输入services.msc ...

  5. Android _关于fragment切换重新加载的解决分享给大家

    在项目中需要进行Fragment的切换,一直都是用replace()方法来替换Fragment但是,这样会有一个问题 ,应该很多朋友都遇到过:每次切换的时候,Fragment都会重新实例化,也就是运行 ...

  6. 执行HBase shell时出现ERROR: org.apache.hadoop.hbase.ipc.ServerNotRunningYetException: Server is not running yet错误解决办法(图文详解)

    不多说,直接上干货! [kfk@bigdata-pro01 bin]$ jps NameNode ResourceManager JournalNode HMaster DataNode HRegio ...

  7. 深入了解preventDefault与stopPropagation

    event.preventDefault()用法介绍(阻止默认事件) 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "subm ...

  8. Java 范例 - 线程

    创建线程 Java 中有以下三种方式创建线程,其中前两种无法获取返回值,而最后一种可以获取返回值. 实现 Runnable 接口 继承 Thread 类 通过 Callable.Future 接口配合 ...

  9. nginx反向代理如何获取真实IP?

    由于客户端和web服务器之间增加了中间层,因此web服务器无法直接拿到客户端的ip,通过$remote_addr变量拿到的将是反向代理服务器的ip地址. 1.安装--with-http_realip_ ...

  10. 简单的字母全排列问题—递归法和STL法

    问题描述:求全由小写字母组成的不超过200个字符序列的全排列 如输入序列bbjd,排列结果为: bbdj bbjd bdbj bdjb bjbd bjdb dbbj dbjb djbb jbbd jb ...