jquery中live和bind的区别

最新推荐文章于 2020-04-16 14:26:51 发布

yeshao_info

最新推荐文章于 2020-04-16 14:26:51 发布

阅读量394

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： jQuery Ajax

本文链接：https://blog.youkuaiyun.com/yeshao_info/article/details/9141333

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了jQuery中的事件绑定方法，包括.bind(), .live()及事件委托的概念。对比了.bind()和.live()的区别，并解释了.live()如何通过事件委托实现对动态添加元素的事件绑定。此外，还提及了Struts2框架中JSON返回结果的配置问题。

记录一下，今天在项目中碰到的问题，页面中用bind绑定了click方法，但是页面局部刷新后（通过分页取下一页数据），再点击页面中某条数据的编辑按钮，没效果，以前没怎么注意，见jquery API说的很清楚，记录一下：

API说明如下：

live():

这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说

<body>
  <div class="clickme">Click here</div>
</body>

可以给这个元素绑定一个简单的click事件：

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

当点击了元素，就会弹出一个警告框。然后，想象一下这之后有另一个元素添加进来了。

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

尽管这个新的元素也能够匹配选择器 ".clickme" ，但是由于这个元素是在调用 .bind() 之后添加的，所以点击这个元素不会有任何效果。

.live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的：

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

然后再添加一个新元素：

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

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

事件委托

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

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

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

附加说明

.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() 无法实现这个目的。

参考 .bind() 方法可以获得更多关于事件绑定的信息。

在jQuery 1.4.1 中，.live() 能接受多个，用空间分隔事件，在提供类似.bind()的功能。例如，我们可以“live ” 同时绑定mouseover和mouseout事件,像这样：

$('.hoverme').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
    // do something on mouseover
  } else {
    // do something on mouseout
  }
});

在jQuery 1.4.3中:你可以绑定一个或多个事件类型的字符串和函数的数据映射来执行他们

$("a").live({
  click: function() {
    // do something on click
  },
  mouseover: function() {
    // do something on mouseover
  }
});

在jQuery 1.4 中，data参数可以用于把附加信息传递给事件处理函数。一个很好的用处是应付由闭包导致的问题。可以参考 .bind() 的讨论来获得更多信息。

在jQuery 1.4 中， live事件可以绑定到“context”DOM元素，而不是默认的文档的根。要设置此背景下，我们通过在一个单一的DOM元素(而不是一个jQuery集合或选择器)使用jQuery() function's second argument。

$('div.clickme', $('#container')[0]).live('click', function() {
  // Live handler called.
});

一个关于.bind(), .live(), and .delegate()三者的比较，其中说明了.bind的速度比.live快，但功能没.live()应用强，但.delegate（）比.live（）更强大

见下面的链接

http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

如果用以后公司都用更新的jquery版本，可以废掉这些，直接用1.7中.on(), .off()方法了

http://blog.jquery.com/2011/09/28/jquery-1-7-beta-1-released/

======================================================================================

同时记录一个问题，关于struts2中json的返回问题，当struts.xml中配置<>

<param name="root">result</param>

</result>

name="root" 还有其他好几种写法，代表的意思也不同，

同时说明一下：其中的result是 action类中的属性值，

问题是：断点进到acion类，却老是显示no acton and result的错误，是url的路径不对，必须与访问的路径要一致