1.bind    jquery 1.3之前

定义和用法:主要用于给选择到的元素上绑定特定事件类型的监听函数

语法:  bind(type,[data],function(e));

特点:

a.适合页面元素静态绑定,只能调用已经存在的元素绑定事件

b.当页面加载完后,才可以进行bind(),  所以有可能产生效率问题

$("#box").bind("click",function(e){
$(this).css({"width":"200px"})
})

2.live  jquery 1.7之后不能使用

定义和用法:主要用于给选择到的元素上绑定特定事件类型的监听函数;

语法:live(type, [data], fn);

特点:

(1)、live方法并没有将监听器绑定到自己(this)身上,而是绑定到了this.context上了。

(2)、live正是利用了事件委托机制来完成事件的监听处理,把节点的处理委托给了document,新添加的元素不必再绑定一次监听器。

(3)、使用live()方法但却只能放在直接选择的元素后面,不能在层级比较深,连缀的DOM遍历方法后面使用,即$(“ul”").live...可以,但$("body").find("ul").live...不行;

实例如下:$( document ).on( "click", "#members li a", function( e ) {} );

(3)、delegate 【jQuery 1.4.2中引入】
定义和用法:将监听事件绑定在就近的父级元素上

语法:delegate(selector,type,[data],fn)

特点:

  (1)、选择就近的父级元素,因为事件可以更快的冒泡上去,能够在第一时间进行处理。

  (2)、更精确的小范围使用事件代理,性能优于.live()。可以用在动态添加的元素上。

实例如下:

$("#info_table").delegate("td","click",function(){/*显示更多信息*/});

$("table").find("#info").delegate("td","click",function(){/*显示更多信息*/});

$("#box2").delegate(".box","click",function(e){
$(this).css({"width":"200px"})
})
 
 

(4)、on 【1.7版本整合了之前的三种方式的新事件绑定机制】
定义和用法:将监听事件绑定到指定元素上。

语法:on(type,[selector],[data],fn)

实例如下:$("#info_table").on("click","td",function(){/*显示更多信息*/});参数的位置写法与delegate不一样。

说明:on方法是当前JQuery推荐使用的事件绑定方法,附加只运行一次就删除函数的方法是one()。

总结:.bind(), .live(), .delegate(),.on()分别对应的相反事件为:.unbind(),.die(), .undelegate(),.off()

jQuery事件委托方法 bind live delegate on的更多相关文章

  1. jQuery事件绑定方法bind、 live、delegate和on的区别

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

  2. jquery 事件委托

    什么事件委托? DOM在为页面中的每个元素分派事件时,相应的元素一般都在事件冒泡阶段处理事件.在类似 body > div > a 这样的结构中,如果单击a元素,click事件会从a一直冒 ...

  3. JQuery的click、bind、delegate、off、unbind

    .click与.bind .click和.bind都是给每个元素绑定事件,对于只绑定一个click事件,.bind事件的简写就是.click那种方式. 这两种方式都会出现两个问题: 第一个问题,如果要 ...

  4. javascript事件委托和jquery事件委托

    元旦过后,新年第一篇. 初衷:很多的面试都会涉及到事件委托,前前后后也看过好多博文,写的都很不错,写的各有千秋,自己思前想后,为了以后自己的查看,也同时为现在找工作的前端小伙伴提供一个看似更全方位的解 ...

  5. 【Unity3D技巧】在Unity中使用事件/委托机制(event/delegate)进行GameObject之间的通信 (二) : 引入中间层NotificationCenter

    作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 一对多的观察者模式机制有什么缺点? 想要查看 ...

  6. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  7. jQuery事件委托

    jQuery事件委托 <ul id="ulBox"> <li data-id="1"></li> <li data-i ...

  8. jquery事件委托详解

    jQuery事件委托处理流程 上一章分析jQuery.event.add的时候已经分析了事件绑定,再把绑定的部分源码抽出来 if ( !(eventHandle = elemData.handle) ...

  9. 转载: jQuery事件委托( bind() \ live() \ delegate()) [委托 和 绑定的故事]

    转载:http://blog.csdn.net/zc2087/article/details/7287429 随着DOM结构的复杂化和Ajax等动态脚本技术的运用,事件委托自然浮出了水面.jQuery ...

随机推荐

  1. windows开机锁定小键盘

    1.启动注册表编缉器 按下windows+R键,输入regedit回车启动注册表编缉器 2.修改注册表默认值 展开HKEY_USERS\.DEFAULT\Control Panel\Keyboard将 ...

  2. learning ddr mode register MR1

  3. flask小例

    #写一个app.py,处理3个URL: ''' GET / : 首页,返回Home; GET /signin:登录页,显示登录表单; POST /signin: 处理登录表单,显示登录结果. ''' ...

  4. 1.1最简单的socket连接

    socket 服务器代码 # -*- coding: utf-8 -*-from socket import * myHost = '' #''说明所有IP都可以连接 myPort = 50007 # ...

  5. JavaScript 基础,登录前端验证

    <script></script>的三种用法: 放在<body>中 放在<head>中 放在外部JS文件 <!DOCTYPE html> & ...

  6. JavaScript+CSS+DIV实现下拉菜单示例

    <!DOCTYPE html> <html> <head> <title>下拉菜单示例</title> <script languag ...

  7. Android开发---如何操作资源目录中的资源文件

    效果图: 1.activity_main.xml <?xml version="1.0" encoding="utf-8"?> <Linear ...

  8. java.lang.ClassCastException: android.os.BinderProxy cannot be cast to com.test.Test

    由于我在第二个Activity中指定了进程名字,但是服务却没有指定进程名(默认跟主入口一个进程)所以报错. 网上找到的是 服务 和绑定服务的客户端必须在同一个application或者进程中,所以Ma ...

  9. android 自定义命名空间 http://schemas.android.com/apk/res-auto

    XML中用 xmlns="http://schemas.android.com/apk/res-auto" 获取自定义属性值: public static String NAMES ...

  10. AntPathMatcher做路径匹配

    转发自: http://www.cnblogs.com/leftthen/p/5212221.html 需要看详细的请看上面的链接 这里以我这里的一个Filter 中需要对路径做例外处理,filter ...