bind(),live()都是调用on()函数,只不过传递的参数不同。

一、$(selector).bind(event,data,fn);

$('#J_btn').bind('click',function(){
//直接绑定在指定元素上
//只能针对已经存在的元素进行事件的设置
});

二、$(selector).live(event,data,fn);

$('#J_btn').live('click',function(){
//委托,绑定在父元素上,父元素只能是document
//live可以实现动态绑定
//通过冒泡的方式来绑定到元素上
//支持未来新添加元素的事件设置
});

三、$(selector).delegate(childSelector,event,data,fn);

$("#J_btn").delegate("J_btn_left","click",function(){
//委托,绑定在父元素上,父元素可以是任意的祖先节点
//delegate可以实现动态绑定
//通过冒泡的方式来绑定到元素上
//支持未来新添加元素的事件设置
});

四、$(selector).on(event,childselector,data,fn);

$("#J_btn").on("click","J_btn_left",function(){
//支持未来新添加元素的事件设置
});

jQuery推出on()的目的有2个,一是为了统一接口,二是为了提高性能,所以从现在开始用on()替换bind(), live(), delegate()吧。尤其是不要再用live()了,因为它已经处于不推荐使用列表了,随时会被干掉。如果只绑定一次事件,那接着用one()吧,这个没有变化。bind()支持Jquery所有版本;live()支持jquery1.8-;delegate()支持jquery1.4.2+;on()支持jquery1.7+。
五、事件处理
1、单事件处理

$(selector).on("click",data,fn);

2、多事件处理

A、利用空格分割多事件

$(selector).on("click dbclick mouseout",childselector,data,fn);

B、利用大括号灵活定义多事件

$(selector).on({
event1:fn,
event2:fn,
...
});

C、链式绑定事件

$(selector)
.on("click",childselector,data,fn)
.on("dbclick",childselector,data,fn)
.on("mouseout",childselector,data,fn);

unbind(),die()和undelegate()方法也合并成了off()方法。

jQuery中bind,live,delegate,on的区别的更多相关文章

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

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

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

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

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

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

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

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

  5. jQuery中bind() live() delegate() on() 的区别

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

  6. jQuery中bind方法和live方法区别解析

    Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡 ...

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

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

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

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

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

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

  10. jQuery中.bind() .live() .delegate() .on()区别

    $(selector).bind(event,data,function) $(selector).live(event,data,function)//jquery1.9版本以下支持,jquery1 ...

随机推荐

  1. 05.UIDynamic

    CHENYILONG Blog 05.UIDynamic Fullscreen © chenyilong. Powered by Postach.io Blog

  2. laravel new xxx 安装laravel 慢的问题

    问题:使用官方文档上安装 laravel laravel new xxx 安装速度奇慢无比,设置了composer 全局镜像也没有用 composer config -g repo.packagist ...

  3. HDU 4707 Pet 邻接表实现

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4707 解题报告:题目大意是在无向图G中有n个点,分别从0 到n-1编号,然后在这些点之间有n-1条边, ...

  4. OpenCV LIBTIFF_4.0 link errors

    以前用Caffe用的好好的,今天重装后居然报了很多这样的错误 /usr/lib/libopencv_highgui.so.' 1> /usr/lib/libopencv_highgui.so.' ...

  5. pywin32记录备忘

    项目地址:http://sourceforge.net/projects/pywin32/ 文档地址:http://docs.activestate.com/activepython/2.7/pywi ...

  6. ksh函数

    在不同的shell环境里,shell脚本的写法是不同的 此链接为ksh环境的函数写法: https://blog.csdn.net/shangboerds/article/details/487115 ...

  7. 原生JS实现AJAX、JSONP及DOM加载完成事件

    一.JS原生Ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...

  8. json字符串与java对象的相互转换(jackson)

    1.java对象转换为json字符串 package com.chichung.json; import com.fasterxml.jackson.core.JsonProcessingExcept ...

  9. Spring cloud Feign 调用端不生效

    如果提供方的接口经过测试是没问题的话. 消费方启动类加上@EnableFeignClients 注意定义的接口如果不和启动类在同一个包路径下,需要加basePackages 即:@EnableFeig ...

  10. 使用django发送邮件时的连接超时问题解决

    一.报错 研究报错半天,没看出代码有什么毛病,就是发送邮件时连接超时,发送邮件的连接用户名密码都没有错误,于是就网上各种查... 终于皇天不负有心人,找到答案了.. 在服务器上输入telnet smt ...