jQuery中bind(),one(),on(),live()这几个绑定事件函数的区别

时间:2022-08-25 09:52:59

1、bind()方法

为每个匹配元素的特定事件绑定事件处理函数。bind()方法的底层逻辑是on()方法
.bind() 方法是用于往文档上附加行为的主要方式。所有JavaScript事件对象,比如focus, mouseover, 和 resize,都是可以作为type参数传递进来的。
举例说明:
.bind()最基本的用法是:

$('#foo').bind('click', function() {
alert('User clicked on "foo."');
});

这个代码能使ID为foo的元素响应click事件。当用户点击元素内部之后,就会弹出一个警告框。

2、on()方法

在选择元素上绑定一个或多个事件的事件处理函数。
on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中,.on()方法 提供绑定事件处理程序所需的所有功能
jQuery中bind(),one(),on(),live()这几个绑定事件函数的区别
参数说明:
events:一个或多个用空格分隔的事件类型和可选的命名空间,如”click”或”keydown.myPlugin” 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略,当它到达选定的元素,事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

3、one()方法

为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。
在每个对象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象,可以通过它来阻止(浏览器)默认的行为。如果既想取消默认的行为,又想阻止事件起泡,这个事件处理函数必须返回false。
jQuery中bind(),one(),on(),live()这几个绑定事件函数的区别
参数说明:
type:添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
data:将要传递给事件处理函数的数据映射
fn:每当事件触发时执行的函数。

4、live()方法

jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效
jQuery中bind(),one(),on(),live()这几个绑定事件函数的区别

这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。
事件委托
.live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。
附加说明:
.live() 虽然很有用,但由于其特殊的实现方式,所以不能简单的在任何情况下替换 .bind()。主要的不同有:

  1. 在jQuery 1.4中,.live()方法支持自定义事件,也支持所有的 JavaScript 事件。在jQuery 1.4.1中,甚至也支持 focus 和 blur 事件了(映射到更合适,并且可以冒泡的focusin和focusout上)。另外,在jQuery 1.4.1中,也能支持hover(映射到”mouseenter mouseleave”)。然而在jQuery 1.3.x中,只支持支持的JavaScript事件和自定义事件:click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.
  2. .live() 并不完全支持通过DOM遍历的方法找到的元素。取而代之的是,应当总是在一个选择器后面直接使用 .live() 方法,正如前面例子里提到的。
  3. 当一个事件处理函数用 .live() 绑定后,要停止执行其他的事件处理函数,那么这个函数必须返回 false。 仅仅调用 .stopPropagation() 无法实现这个目的。

特别注意:

从 jQuery 1.7 开始,不再建议使用 .live() 方法。请使用 .on() 来添加事件处理。