live可以说是bind是方法的变种。

二者的主要区别就是live方法的作用机理是事件委托,live方法的作用机理是将事件绑定DOM的根节点上。

live方法的处理机制就是把事件绑定在DOM树的根节点上,而不是直接绑定在某个元素上。举一个例子来说明:

$(".clickMe").live("click",fn);

$("body").append("<div class='clickMe'>测试live方法的步骤</div>");

当我们点击这个新增的元素时会依次发生如下步骤:

(1)生成一个click事件,传递给div来做处理

(2)由于没有事件直接绑定在div上,所以事件直接冒泡到DOM树上

(3)事件不断冒泡,直到DOM树的根节点上,默认情况下,根节点上就绑定了这个click事件

(4)执行由live绑定的click事件

(5)检测绑定事件的对象是否存在,判断是否需要继续执行绑定的事件。检测事件对象是通过检测

$(event.target).closest('.clickMe') 能否找到匹配的元素来实现的。

(6)通过(5)的测试,如果绑定事件的对象存在的话,就执行绑定的事件。

由于只有在事件发生的时候,live方法才会去检测绑定事件的对象是否存在,所以live方法可以实现后来新增的元素也可实现事件的绑定。相比之下,bind会在事件在绑定阶段就会判断绑定事件的元素是否存在,而且只针对当前元素进行绑定,而不是绑定到父节点上。

所以bind是只能对当前存在的元素绑定事件,l对后来新增的元素无效。live对后来新增的元素也是有效的。

关于jquery中的事件绑定bind()和live()的更多相关文章

  1. Jquery中的事件绑定$(&quot;#btn&quot;).bind(&quot;click&quot;,function(){ })

    Jquery中的事件绑定:$("#btn").bind("click",function(){  }) 由于每次都这么调用太麻烦,所以jquery就用$(&qu ...

  2. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

  3. jQuery 中的事件绑定

    一.事件概念 和数据库中的触发器一样,当操作了数据的时候会引发对应的触发器程序执行 一样,JS 中的事件就是对用户特定的行为作出相应的响应的过程,其实上就是浏览器 监听到用户的某些行为的时候会执行对应 ...

  4. jQuery中是事件绑定方式--on、bind、live、delegate

    概述:jQuery是我们最常用的js库,对于事件的绑定也是有很多种,on.one.live.bind.delegate等等,接下来我们逐一来进行讲解. 本片文章中事件所带的为版本号,例:v1.7+为1 ...

  5. jQuery 中的事件绑定与取消绑定

    1:在jQuery中使用bind方法进行事件的绑定,bind方法有两个参数,第一个参数是事件的类型例如click,change,keyup,keydown,blur,focus等.第二个参数是一个回调 ...

  6. js和jQuery中的事件绑定与普通事件

    普通事件,是指直接对元素进行事件注册,然后触发 而事件绑定是将事件注册到元素上 两者区别就是在于普通事件不可以重复添加多个事件,若添加也会覆盖,只会触发其中一个事件(最后注册的那个) 而事件绑定是可以 ...

  7. jQuery中的事件绑定的几种方式

    jQuery目前有on(),bind(),delegate(),live()四种绑定方式,但是随着版本的不断更新,有的方式也相应的被淘汰掉 [band()方式绑定] 3.0版本之前的绑定方式比较常用的 ...

  8. jQuery学习笔记(三)jQuery中的事件

    目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一.加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...

  9. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

随机推荐

  1. 04-时序逻辑电路设计之计数器——小梅哥FPGA设计思想与验证方法视频教程配套文档

    芯航线--普利斯队长精心奉献 实验目的:以计数器为例学会简单的时序逻辑电路设计 实验平台:芯航线FPGA核心板 实验原理: 时序逻辑电路是指电路任何时刻的稳态输出不仅取决于当前的输入,还与前一时刻输入 ...

  2. vlc播放yuv文件

    vlc.exe --demux rawvideo --rawvid-fps 25 --rawvid-width 480 --rawvid-height 272 --rawvid-chroma I420 ...

  3. python操作TexturePacker批量打包资源plist png

    import os,sys imagedir = 'D:\\PackerImg\\imgDir' outplistdir = 'D:\\PackerImg\\outDir' comend = 'Tex ...

  4. zigbee学习之路(三):按键的控制

    一.前言 通过前一次的实验,相信大家都已经对cc2530程序的编写有了一定的认识,这次我们来操作和实验的是cc2530上的按键模块. 二.原理分析 我们先来看一下按键的原理图: 根据原理图我们可以得出 ...

  5. jQuery validation学习(2)验证身份证

    验证邮编 jQuery.validator.addMethod("isZipCode", function(value, element) { -]{}$/; return thi ...

  6. jquery简单动画

    自定义滑入滑出动画 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defaul ...

  7. java 字符串split有很多坑,使用时请小心!!

    System.out.println(":ab:cd:ef::".split(":").length);//末尾分隔符全部忽略 System.out.print ...

  8. IntelliJ IDEA中使用综合使用Maven和Struts2

    在Intellij IDEA中手动使用Maven创建Web项目并引入Struts2 创建一个新的Maven项目 建好项目之后点击左下角的enable auto import 项目部署 在Moudule ...

  9. Response.BinaryWrite()方法输出二进制图像

    protected void Page_Load(object sender, EventArgs e) { FileStream fs = new FileStream(Server.MapPath ...

  10. js正则表达式入门

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...