.unbind()

类别：已淘汰 > 淘汰于3.0 | 事件 > 事件处理函数附件

.unbind( eventType [, handler ] )返回类型：jQueryversion deprecated: 3.0

描述：从元素上删除先前附加的事件处理函数。

自从jQuery 3.0以来，.unbind()被淘汰了。自从jQuery 1.7以来，它被.off()方法取代了，所以早已经不建议使用它。

每个用.bind()方法附加的事件处理函数，可以用.unbind()方法来删除。在最简单的情形中，不带参数，.unbind()删除了所有附加到该元素的事件处理函数：

1
 
$( "#foo" ).unbind();

此版本删除了处理函数，无论事件类型如何。若要更精确，我们可以传入一个事件类型：

1
 
$( "#foo").unbind( "click" );

通过指定click事件类型，只有针对那种事件类型的处理函数会被解绑。然而，如果其他脚本可能将行为附加到同一个元素，则此方法依然会产生负面影响。出于这个原因，健壮而且可扩展的应用程序通常要求两个参数版本：

1
2
3
4
5
 
var handler = function() {
  alert( "The quick brown fox jumps over the lazy dog." );
};
$( "#foo" ).bind( "click", handler );
$( "#foo" ).unbind( "click", handler );

通过命名处理函数，我们可以确保没有其它函数被意外删除。请注意下面的代码不起作用：

1
2
3
4
5
6
7
8
 
$( "#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()方法的讨论所示，可以在绑定处理函数时，使用一个句点（.）字符来定义命名空间：

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

如果是用这种形式绑定事件处理函数，我们依然可以用常规方法解绑它：

1
 
$( "#foo" ).unbind( "click" );

然而，如果我们想要避免影响其它处理函数，我们可以做得更有针对性：

1
 
$( "#foo" ).unbind( "click.myEvents" );

我们还可以解绑一个命名空间中的所有处理函数，无论事件类型如何：

1
 
$( "#foo" ).unbind( ".myEvents" );

当我们开发插件的时候，把命名空间附加到事件绑定特别有用，否则编写代码未来可能与其它事件处理代码产生互动。

使用命名空间

当我们想要从处理函数本身中解绑处理函数时，我们可以使用.unbind()方法的第三种形式。例如，假设我们只想触发一个事件处理函数三次：

1
2
3
4
5
6
7
8
 
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 );
  }
});

在这种情况下，处理函数必须取用一个参数，从而我们可以捕获事件对象，使用它，在第三次点击之后解绑此处理函数。事件对象包含了对.unbind()来说必不可少的的上下文，以知道要删除哪个处理函数。 此事件还是一个闭包的演示。因为此处理函数引用到timesClicked变量，它定义在函数外面，因此递增此变量具有一个效果，哪怕是在不同的处理函数中实施也是有效的。

示例：

可以把事件绑定到着色按钮并解绑。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>unbind demo</title>
  <style>
  button {
    margin: 5px;
  }
  button#theone {
    color: red;
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.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() {
  $( "#theone" )
    .bind( "click", aClick )
    .text( "Can Click!" );
});
$( "#unbind" ).click(function() {
  $( "#theone" )
    .unbind( "click", aClick )
    .text( "Does nothing..." );
});
</script>
 
</body>
</html>

演示：

若要从所有段落中解绑所有事件，请这样写：

1
 
$( "p" ).unbind();

若要从所有段落上解绑所有点击事件，请这样写：

1
 
$( "p" ).unbind( "click" );

若要只解绑一个先前绑定的处理函数，请传入此函数作为第二个参数：

1
2
3
4
5
6
7
 
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.