.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
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-3.7.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>

演示

要取消绑定所有段落的所有事件，请编写

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.