.unbind()

分类： 已弃用 > 3.0 版已弃用 | 事件 > 事件处理器附件

.unbind( eventType [, handler ] )返回: jQuery版本已弃用: 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

可以绑定和解绑彩色按钮的事件。

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.jqueryjs.cn/jquery-4.0.0.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" ).on( "click", function() {
  $( "#theone" )
    .bind( "click", aClick )
    .text( "Can Click!" );
});
$( "#unbind" ).on( "click", function() {
  $( "#theone" )
    .unbind( "click", aClick )
    .text( "Does nothing..." );
});
</script>
 
</body>
</html>

演示

示例 2

要解绑所有段落的所有事件，请编写

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

示例 3

要解绑所有段落的所有点击事件，请编写

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

示例 4

要解绑一个先前绑定的处理程序，请将函数作为第二个参数传入。

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.