返回值:jQueryunbind([eventType], [handler(eventObject)])

从元素上移除先前绑定的事件。

通过 .bind() 绑定的事件处理函数,可以通过 .unbind() 方法移除。(从 jQuery 1.7 开始,在元素上进行事件绑定和解除绑定的首选方法是 .on() .off() ) 该方法最简单的使用方法是,不传入任何参数,.unbind() 会移除元素上所有绑定的事件:

$('#foo').unbind();

上述方法会移除所有类型的事件处理。若要准确移除某种特定类型的事件处理,可以传入一个事件类型:

$('#foo').unbind('click');

若指定的是 click 事件类型,那么仅会解除绑定该类型的事件处理。但是这么做也有负面影响,这是因为有可能在代码的其它地方在相同的元素上绑定了相同的事件处理。为了避免该问题,对于一个健壮性和扩展性强的应用而言,通过在使用该方法时,会传入两个参数:

var handler = function() {
  alert('The quick brown fox jumps over the lazy dog.');
};
$('#foo').bind('click', handler);
$('#foo').unbind('click', handler);

通过传入 handler 参数,我们可以确保不会意外的移除其它的函数。但是需要注意的是,如下用法是无法正常工作的:

$('#foo').bind('click', function() {
  alert('The quick brown fox jumps over the lazy dog.');
});

// will NOT work
$('#foo').unbind('click', function() {
  alert('The quick brown fox jumps over the lazy dog.');
});

尽管上述代码中,两个匿名函数的内容是一样的,但是它们是在不同的地方被创建的,因此 JavaScript 会将它们当成是不同的函数对象。若要解除绑定特定的事件处理函数,我们需要的是指向该函数的引用,而不是内容相同的不同函数。

注意: 使用代理函数解绑元素上的事件并不会解绑该元素上所有的代理函数,因为相同的代理函数是作用于所有被代理的事件。可以使用事件上唯一的类名来解除绑定特定的事件(例如,click.proxy1, click.proxy2)。

使用命名空间

与为了解除事件绑定,而维护事件处理方法的引用不同,我们可以为事件定义命名空间,并且使用它来缩小解除动作的范围。正如在 .bind() 方法中讨论过的那样,绑定事件处理的命名空间是使用句点(.)符号来定义的:

$('#foo').bind('click.myEvents', handler);

当以这种方式绑定事件时,我们依然可以使用普通的方式来解除绑定:

$('#foo').unbind('click');

但如果您希望在解除绑定时避免影响其它的事件处理,我们可以指定更加详细的信息:

$('#foo').unbind('click.myEvents');

我们同样可以解除绑定同一命令空间下所有的事件处理,而不管它的事件类型是什么:

$('#foo').unbind('.myEvents');

当进行插件开发或今后的代码可能与其它事件处理相交互时,使用命名空间来进行事件绑定就是很好的做法。

使用 Event 对象

.unbind(event) 这种用法适用于移除自身所绑定的事件。例如,假设我们希望仅触发一个事件处理函数三次:

var timesClicked = 0;
$('#foo').bind('click', function(event) {
  alert('The quick brown fox jumps over the lazy dog.');
  timesClicked++;
  if (timesClicked >= 3) {
    $(this).unbind(event);
  }
});

这种情况下,事件处理函数必须带有一个参数,这样我们就可以捕获 event 对象,并且使用它在第三点击时,移除该事件处理。event 对象包含 .unbind() 所需的必要上下文信息,来确定需要移除的事件处理函数。 该例子同时也演示了闭包的用法。由于在事件处理中,引用了在函数外定义的 timesClicked 外部变量,因此在事件处理被调用时,该变量会持续递增。

示例:

为带颜色的按钮绑定和解除事件绑定。

<!DOCTYPE html>
<html>
<head>
<style>
button { margin:5px; }
button#theone { color:red; background:yellow; }
</style>
<script src="jquery.min.js"></script>
</head>
<body>

<button id="theone">Does nothing...</button>
<button id="bind">Bind Click</button>
<button id="unbind">Unbind Click</button>

<div style="display:none;">Click!</div>

<script>



function aClick() {
$("div").show().fadeOut("slow");
}
$("#bind").click(function () {
// could use .bind('click', aClick) instead but for variety...
$("#theone").click(aClick)
  .text("Can Click!");
});
$("#unbind").click(function () {
$("#theone").unbind('click', aClick)
  .text("Does nothing...");
});



</script>
</body>
</html>

演示:

示例:

可以像下面这样,解除绑定在段落上的所有事件:

jQuery 代码:
$("p").unbind()

示例:

可以像下面这样,解除绑定在段落上的 click 事件:

jQuery 代码:
$("p").unbind( "click" )

示例:

通过传入的第二个参数,仅解除绑定先前绑定的事件:

jQuery 代码:
var foo = function () {
// code to handle some kind of event
};

$("p").bind("click", foo); // ... now foo will be called when paragraphs are clicked ...

$("p").unbind("click", foo); // ... foo will no longer be called.