jQuery中bind方法和live方法区别解析

Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个。在很多比较复杂的应用程序中，停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡(和其它浏览器方式不同)。以下给出一种通用的方式来实现阻止事件的冒泡,该通用方式接受一个参数[传递到事件处理程序中的事件对象],该函数处理取消事件冒泡的两种方式：标准的W3C方式和非标准的IE方式：

什么是事件冒泡[又称为事件传播]:当我们点击一个元素时,它会触发bind在该元素上的click事件,如果该click事件被触发后,它会向其父元素传播,并且触发其父元素的click事件,直到根节点的document节点。

///
/// 取消冒泡事件
///
function stopBubble(ev){
if(ev&&ev.stopPropagation){

//因此它支持W3C的stopPropagation()方法
        ev.stopPropagation();
    }
else {

//否则，我们需要使用IE的方式来取消事件冒泡
        window.event.cancelBubble = true;
    }

}

View Code

接下来介绍一下jQuery中bind、live和delegate之间的区别:

1. bind只能对当前存在的dom元素作用,对于通过Javascript代码动态添加的dom元素是无作用的;

2. live弥补了bind的上述缺陷,live可以对当前不存在的dom元素起作用,也就是说可以对后来通过Javascript代码动态添加的dom元素起作用;

3. delegate适用于当前存在的或者是后来通过代码动态添加的子元素,例如:

$(document).ready(function(){
  $('div').delegate('p','click',function(){
    $(this).slideToggle();
  });
  $('button').click(function(){
    $('<p>This is new added section</p>').insertAfter('button');
  });
});

View Code

live之所以能够对后来动态生成的dom元素绑定事件原因归结在"事件委托上",所谓的"事件委托"就是指绑定在祖先元素上的事件可以对其后代元素作用,live的实现原理就是直接将事件绑定在Dom树根节点上。

举个例子:

$('.clickMe').live('click',function(){alert('You have already clicked me.')});
$('body').append('<div class="clickMe">测试一下Click me</div>');

View Code

当我们点击新添加的div元素时,会依次发生如下的步骤:

1. 生成一个click事件,传递个div做处理;

2. 由于没有在div上直接绑定click事件,所以事件直接冒泡到Dom树上;

3. 事件不断的冒泡,直到Dom树的根节点上,默认情况下,树的根节点上就绑定了click事件;

4. 执行由live绑定的click事件;

5. 检测绑定事件的对象是否存在,判断是否要继续执行绑定的事件,检测事件对象是通过检测$(event.target).closest('.clickMe') 能否找到匹配的元素来实现的;

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

live方法,由于事件发生的时候才去检测对象是否存在,因此可以实现事件作用于后来动态添加的Dom元素,而bind方法则是在绑定事件的时候就检测该Dom元素是否存在,因此,不可以作用于后来动态添加的Dom元素。

但是在一些情况下,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()是无法实现阻止事件的传递或者冒泡的。

秒客网

jQuery中bind方法和live方法区别解析

相关文章