bind 和 live的区别

Jquery中绑定事件有三种方法:以click事件为例

(1)target.click(function(){});

(2)target.bind("click",function(){});

(3)target.live("click",function(){});

第一种方法很好理解,其实就和普通JS的用法差不多,只是少了一个on而已

第二、三种方法都是绑定事件,但是二者又有很大的不同,下面着重讲解一下,因为这个如果用到Jquery的框架的话是用的挺多的,尤其要注意二者的区别。

【bind和live的区别】

live方法其实是bind方法的变种,其基本功能就同bind方法的功能是一样的,都是为一个元素绑定某个事件,但是bind方法只能给当前存在的元素绑定事件,对于事后采用JS等方式新生成的元素无效,而live方法则正好弥补了bind方法的这个缺陷,它可以对后生成的元素也可以绑定相应的事件。那么live方法的这个特性是怎么实现的呢?下面来探讨一下其实现原理。

live方法之所以能对后生成的元素也绑定相应的事件的原因归结在“事件委托”上面,所谓“事件委托”就是指绑定在祖先元素上的事件可以在其后代元素上进行使用。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会在事件在绑定阶段就会判断绑定事件的元素是否存在,而且只针对当前元素进行绑定,而不是绑定到父节点上。

根据上面的分析,live的好处真是很大,那么为什么还要使用bind方法呢?之所以jquery要保留bind方法而不是采用live方法去替代bind,也是因为live在某些情况下是不能够完全替代bind的。主要的不同如下:

(1)bind方法可以绑定任何JavaScript的事件,而live方法在jQuery1.3的时候只支持click, dblclick,

keydown, keypress, keyup,mousedown, mousemove, mouseout, mouseover, 和 mouseup.

在jQuery 1.4.1中,甚至也支持 focus 和 blue事件了(映射到更合适,并且可以冒泡的focusin和

focusout上)。另外,在jQuery 1.4.1中,也能支持hover

(映射到"mouseenter mouseleave")。

(2)live() 并不完全支持通过DOM遍历的方法找到的元素。取而代之的是,应当总是在一个选择器后

面直接使用 .live() 方法。

(3)当一个元素采用live方法进行事件的绑定的时候,如果想阻止事件的传递或冒泡,就要在函数中

return false,仅仅调用stopPropagation()是无法实现阻止事件的传递或者冒泡的

时间: 2024-11-13 06:52:07

bind 和 live的区别的相关文章

jQuery中的bind() live() delegate()之间区别分析

jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click',function (){ alert('click'); }) 解析:这种方式最简单,jq扫描文档找出所有的a,让将函数绑定到每个元素的click事件上 2.live方式 $('a').live('click',function (){ alert('click'); }) 解析:jq将函数绑定到$

Bind和Eval的区别详解

原文:Bind和Eval的区别详解 1.简单描述Eval和Bind的区别 绑定表达式 <%# Eval("字段名") %> <%# Bind("字段名") %> 区别 1.eval是只读数据,bind是可更新的. 2.当对次表达式操作时候,必须用Eval 如<%# Eval("字段名").ToString().Trim() %> 2.若GridView中绑定列里面 设置 内容格式 DataFormateStri

Jquery绑定事件(bind和live的区别)

Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function(){}); (3)target.live("click",function(){}); 第一种方法很好理解,其实就和普通JS的用法差不多,只是少了一个on而已 第二.三种方法都是绑定事件,但是二者又有很大的不同,下面着重讲解一下,因为这个如果用到Jquery的框架的话是用的挺多的,尤其要

Jquery中bind和live的区别

Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function(){}); (3)target.live("click",function(){}); 第一种方法很好理解,其实就和普通JS的用法差不多,只是少了一个on而已 第二.三种方法都是绑定事件,但是二者又有很大的不同,下面着重讲解一下,因为这个如果用到Jquery的框架的话是用的挺多的,尤其要

call,apply,bind的用法以及区别

1.call.apply.bind的作用是改变函数运行时this的指向 方法调用模式: 当一个函数被保存为对象的一个方法时,如果调用表达式包含一个提取属性的动作,那么它就是被当做一个方法来调用,此时的this被绑定到这个对象. var a = 1 var obj1 = { a:2, fn:function(){ console.log(this.a) } } obj1.fn()//2 此时的this是指obj1这个对象,obj1.fn()实际上是obj1.fn.call(obj1),事实上谁调用

bind与call的区别

bind与call很相似,,例如,可接受的参数都分为两部分,且第一个参数都是作为执行时函数上下文中的this的对象. 不同点有两个: ①bind的返回值是函数 //都是将obj作为上下文的this function func(name,id) {     console.log(name,id,this); } var obj = "Look here"; //什么也不加 func("    ","-->"); //使用bind是 返回改变

asp.net bind()和eval()的区别

eval()方法在运行时使用反射执行后期绑定计算,因此与标准的ASP.NET数据绑定方法bind相比,会导致性能明显下降.它一般用在绑定时需要格式化字符串的情况下.多数情况尽量少用此方法Eval 方法是静态(只读)方法,该方法采用数据字段的值作为参数并将其作为字符串返回.Bind 方法支持读/写功能,可以检索数据绑定控件的值并将任何更改提交回数据库.使用 Eval 方法Eval 方法可计算数据绑定控件(如 GridView.DetailsView 和 FormView 控件)的模板中的后期绑定数

jquery中的bind()、live()的区别与使用(事件处理)

使用jquery有一段时间了,刚开始看别人的源代码的时候对事件的绑定方法有疑惑.比如: var btn=$("#button"); btn.click(function(){ alert("I have been clicked!"); }); 这就绑定了一个click事件. 1.bind()方法解析 但后来发现jqueryAPI里面还有bind方法,一直没有使用过,查看API的使用方法: $("p").bind("click"

JQ的live(),on(),deletage(),bind()几个的区别

今天在网上看到一篇文章,关于JQ里面事件绑定的区别,说说我自己看后的理解,本人菜鸟一枚,很多东西不懂 ,有理解错误的还望大神们多多指教 bind()方法是绑定事件最直接的方法,这个方法是绑定到document上存在最久的方法,也很好的解决了兼容性方面的问题: bind()方法的优点:1.很好的解决了各个浏览器的兼容性问题: 2.非常方便简单的能进行事件的绑定:  3.对于利用ID选出来的元素是非常好的,不仅仅是很快的可以hook上去(因为一个页面只有一个id),而且当事件发生时,handler可