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. adb(Android Debug Bridge)安装使用教程

    一.说明 adb的db是debug bridge而不是和gdb一样指debug,这意思是说adb不能像gdb那样能一步步调试代码,但可以启到一些类似调试的功能. 下面就针对这些功能进行介绍,本文根据官 ...

  2. 使用Intellij中的Spring Initializr来快速构建Spring Boot/Cloud工程(十五)

    在之前的所有Spring Boot和Spring Cloud相关博文中,都会涉及Spring Boot工程的创建.而创建的方式多种多样,我们可以通过Maven来手工构建或是通过脚手架等方式快速搭建,也 ...

  3. python 关闭垃圾回收

    import gc gc.disable() http://blog.csdn.net/aixiaohei/article/details/6446869

  4. MAVEN 创建项目

    使用archetype生成项目骨架 MAVEN 创建项目JAR 和 MAVEN创建项目WAR中是使用特定的acrchetype来进行创建项目,如果使用其他的archetype来创建项目或是使用 mvn ...

  5. Android Studio2.1版本后使用虚拟机碰见的问题总结以及其他问题

    一.androidstudio的sdk配置问题 如果点击Start a new Android Studio project是没有反应的,并且在Configure下面的SDK Manager是灰色的, ...

  6. Python3 线程/进程池 concurrent.futures

    python3之concurrent.futures一个多线程多进程的直接对接模块,python3.2有线程池了 Python标准库为我们提供了threading和multiprocessing模块编 ...

  7. python中字典常用的方法

    #定义一个空字典: a={ } 定义一个字典: d={'age':18} #增加一个元素: d['age']=20   d[k]=v d.setdefault('age',18)    d.setde ...

  8. C++11智能指针 share_ptr,unique_ptr,weak_ptr用法

    0x01  智能指针简介  所谓智能指针(smart pointer)就是智能/自动化的管理指针所指向的动态资源的释放.它是存储指向动态分配(堆)对象指针的类,用于生存期控制,能够确保自动正确的销毁动 ...

  9. html随笔CSS(*^__^*)

    控制文本显示字数,超过规定的文本长度  x显示... white-space:nowrap;        //规定不能换行 overflow:hidden; text-overflow:ellips ...

  10. easyui再学习的一部分代码

    <%-- Created by IntelliJ IDEA. User: zhen Date: // Time: : To change this template use File | Set ...