1.jQ操作DOM元素的绑定事件的四种方式
       jQ中提供了四种事件监听方式,bind、live、delegate、on,对应的解除监听的函数分别是unbind,die,undelegate,off

2.bind
      $(selector).bind(event,data,function)
      event:事件,必选,一个或多个事件;data:参数,可选; fn:绑定事件发生时执行的函数,必选

      bind()是最直接的,存在最久的绑定方法
      优点:兼容性好,任何浏览器都可以使用
     缺点:它会绑定事件到所有的目标元素上,有一个绑定一个,在页面上的元素不会动态添加的时候使用它没什么问题。但如果列表中动态增加一个元素,点击它是没有反应的,必须再bind一次才执行,所以效率不太高。 
    
    
3.live
    $(selector).live(event,data,function)
    这个方法用到了事件委托的概念来处理事件的绑定
    优点:这里仅有一次的事件绑定,绑定到document上而不像.bind()那样给所有的

   元素挨个绑定,动态添加的元素仍然可以触发那些早先绑定的事件,因为事件真正的绑定是在document上

4.delegate
     $(selector).delegate(childSelector,event,data,function)
      childSelector:selector的子元素,必须写的
     优点:可以选择把这个事件放在哪个元素上,需要迭代查找所有的selector/event data 来决定哪个子元素来匹配

    缺点:需要查找绑定的子元素,尽管比document少很多了,不过,你还是得浪费时间来查找。

5.on
    其实.bind(),.live(),.delegate()都是通过.on()来实现的,.unbind(),.die(),.undelegate(),也是一样的都是通过.off()来实现的。

   优点:提供了一种统一绑定事件的方法
   缺点:也许会对你产生一些困扰,因为它隐藏了前面我们所介绍的三种方法的细节

6.四种方式的异同和优缺点
     相同点:1.都支持单元素多事件的绑定;空格相隔方式或者大括号替代方式;
                    2.均是通过事件冒泡方式,将事件传递到document进行事件的响应
    比较和联系:
                   1.bind()函数只能针对已经存在的元素进行事件的设置;但是live(),on(),delegate()均支持对动态新添加元素的事件设置;
                   2.bind()支持jQ所有版本;live()支持jquery1.8-;delegate()支持jquery1.4.2+;on()支持jquery1.7+;bind()函数在jquery1.7版本以前比较受推崇,1.7版本出来之后,官方已经不推荐用bind(),替代函数为on(),这也是1.7版本新添加的函数,同样,可以用来代替live()函数,live()函数在1.9版本已经删除; 
                  3.live()函数和delegate()函数两者类似,但是live()函数在执行速度,灵活性和css选择器支持方面比delegate()差些

7.结论
      用.bind(),把相同的一个事件处理机制用到所有匹配的DOM元素上;多事件处理:用空格分隔 $(selector).bind("click dbclick mouseout",data,function);

      live()已经被淘汰了
     .delegate()会提供很好的方法来提高效率,同时可以添加到动态创建的元素上
     .on()是整合了之前的3中方式的新事件绑定机制,我们可以用.on()来代替上述的3种方法

参考文献:https://www.cnblogs.com/cxying93/p/6099496.html

jQuery中四个绑定事件的区别 on,bind,live,delegate的更多相关文章

  1. jQuery中ready与load事件的区别

    1.摘要 大家在编程中使用jQuery还有JS的时候一定会在使用之前这样: //document ready $(document).ready(function(){ ...code... }) / ...

  2. jquery中mouseout和mouseleave 事件的区别

    今天用jQuery写了一个选项卡的效果,用mouseout事件控制了鼠标的移出,结果发现在移出时div会发生闪动,于是网上各种查资料觉得用mouseleave更合适一些,

  3. jquery的bind跟on绑定事件的区别

    jquery的bind跟on绑定事件的区别:主要是事件冒泡: jquery文档中bind和on函数绑定事件的用法: .bind(events [,eventData], handler) .on(ev ...

  4. jQuery中ready与load事件

    jQuery中ready与load事件(来自慕课网) jQuery有3种针对文档加载的方法 $(document).ready(function() { // ...代码... }) //docume ...

  5. JS---DOM---总结绑定事件的区别

    总结绑定事件的区别: addEventListener(); attachEvent()   相同点: 都可以为元素绑定事件 不同点: 1.方法名不一样 2.参数个数不一样addEventListen ...

  6. jQuery如何给body绑定事件?

    jQuery如何给body绑定事件? 代码如下: $(document).bind("resize", function () { alert("php-note.com ...

  7. jquery中交替点击事件toggle方法的使用示例

    jquery中交替点击事件toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能,下面有个不错的示例,感兴趣的朋友可以参考下 复制代码代码如下: $('#clickId‘) ...

  8. jQuery中attr和prop方法的区别说明

    jquery中attr和prop的基本区别可以理解为:如果是内置属性,建议用prop,如果是自定义的建议用attr. 例如 <input type=check  node=123 id=ck & ...

  9. jquery中的$().each和$.each的区别

    jquery中的$().each和$.each的区别 注意:jquery中的$().each和$.each的区别,前者只能遍历数组,后者可以遍历数组和对象 备注:sinobook项目中地名本体相关地按 ...

随机推荐

  1. 标准行cp功能

    #include<stdio.h> int main(int argc,char *argv[]) { FILE *src_fp,*des_fp; ]={}; ) { printf(&qu ...

  2. CodeFoces Round #443(div.2)

    http://codeforces.com/contest/879/ A. Borya's Diagnosis time limit per test 2 seconds memory limit p ...

  3. 01背包(分组) HDOJ 4341 Gold miner

    题目传送门 题意:有n个金矿,每个金矿有抓取的消耗的时间和价值,矿工在原点,问在T时间内能得到的最大的价值 分析:唯一和01背包不同的是金矿可能共线,也就是抓取近的金矿后才能抓后面共线的金矿.这是分组 ...

  4. 198 House Robber 打家劫舍

    你是一个专业的强盗,计划抢劫沿街的房屋.每间房都藏有一定的现金,阻止你抢劫他们的唯一的制约因素就是相邻的房屋有保安系统连接,如果两间相邻的房屋在同一晚上被闯入,它会自动联系警方.给定一个代表每个房屋的 ...

  5. .Net应用自定义鼠标样式

    (调用系统API的方法) 1.引用命名空间 using System.Runtime.InteropServices; 命名空间提供各种各样支持 COM 互操作 及平台调用服务的成员.using Sy ...

  6. Oracle中默认创建的表

    安装Oracle数据库后,会自动创建几个表.分别是emp.dept.bonus(也有可能不一样),这些表都在scott账户中.

  7. vue项目中安装cnpm和node_modules

    1.安装cnpm的nodejs包管理工具,命令行: npm install -g cnpm --registry=https://registry.npm.taobao.org   2. 每个vue项 ...

  8. nginx for windows 安装

    一.nginx for windows 的安装地址: http://nginx.org/en/download.html 二.nginx 安装地址: http://nginx.org/en/docs/ ...

  9. R in action读书笔记(8)-第八章:回归(上)

    8.1回归的多面性 8.2 OLS回归 OLS回归拟合模型形式: 为了能够恰当地解释oLs模型的系数,数据必须满足以下统计假设. 口正态性对于固定的自变量值,因变量值成正态分布. 口独立性Yi值之间相 ...

  10. iOS-控件响应用户控制事件之事件处理

    事件处理 响应者对象 在iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事件.我们称之为“响应者对象” UIApplication.UIViewControlle ...