jQuery的bind()与live()

前言

最近一个项目的前端有这样的一个需求：页面中有某按钮，点击按钮之后通过服务器的返回信息更改这个按钮的点击事件执行函数。

方案1

之前小猪使用的方法是给按钮增加class。在jquery中通过class查找到之后使用click增加函数功能

$(".class1").click(function(){

        $(this).removeClass("class1");

        $(this).addClass("class2");

});

这样的代码是实现了样式上的变化。但是虽然样式变化了(class1=>class2)，但是再次点击该按钮时执行的还是缺是执行了,class1的函数。

到此，此方案不可行。

方案2：

小猪之前知道给函数增加时间jQuery不仅提供了方案一的方法，还有bind方法

bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

$(".class1").bind("click".function(){

        $(this).removeClass("class1");

        $(this).addClass("class2");

});

小猪自信满满的准备看到期待的结果。。

可是~~~。。。。。。

看来bind方法和直接使用click的效果是一样的。

方案3：

使用live()方法：

live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

语法：

$(selector).live(event,data,function)

通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。这不是正是我想要的嘛！

$(".class1").live("click".function(){

        $(this).removeClass("class1");

        $(this).addClass("class2");

});

这样，在改变了其样式的同时也改变了其运行的函数。

.live()总结

live与bind和直接添加不同，我的理解就是一个监听事件在冒泡阶段，一个监听事件在执行阶段（不知jQuery怎么在捕获阶段监听事件）。

.live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM 树的根节点上。

如下面的例子：

$('.clickme').live('click', function() { alert("Live handler called."); });

然后再添加一个新元素：

$('body').append('<div class="clickme">Another target</div>');

然后再点击新增的元素，他依然能够触发事件处理函数。

在我们的例子中，当点击新的元素后，会依次发生下列步骤：

1. 生成一个click事件传递给来处理
2. 由于没有事件处理函数直接绑定在 <divgt; 上，所以事件冒泡到DOM树上
3. 事件不断冒泡一直到DOM树的根节点，默认情况下上面绑定了这个特殊的事件处理函数。
4. 执行由 .live() 绑定的特殊的 click 事件处理函数。
5. 这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。这个测试是通过检测 $(event.target).closest('.clickme') 能否找到匹配的元素来实现的。
6. 如果找到了匹配的元素，那么调用原始的事件处理函数。

由于只有在事件发生时才会在上面的第五步里做测试，因此在任何时候添加的元素都能够响应这个事件。

附加说明

• .live() 虽然很有用，但由于其特殊的实现方式，所以不能简单的在任何情况下替换 .bind()。主要的不同有：
• 在jQuery 1.4中，.live()方法支持自定义事件，也支持所有的 JavaScript 事件。在jQuery 1.4.1中，甚至也支持 focus 和 blue 事件了（映射到更合适，并且可以冒泡的focusin和focusout上）。另外，在jQuery 1.4.1中，也能支持hover（映射到"mouseenter mouseleave"）。然而在jQuery 1.3.x中，只支持支持的JavaScript事件和自定义事件：click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.
• .live() 并不完全支持通过DOM遍历的方法找到的元素。取而代之的是，应当总是在一个选择器后面直接使用 .live() 方法，正如前面例子里提到的。
• 当一个事件处理函数用 .live() 绑定后，要停止执行其他的事件处理函数，那么这个函数必须返回 false。 仅仅调用 .stopPropagation() 无法实现这个目的。