.unbind()

分类: Events > Event Handler Attachment

.unbind( [eventType ] [, handler(eventObject) ] )返回: jQuery标记弃用版本: 3.0

描述: 从元素上删除一个以前附加事件处理程序。

  • 添加的版本: 1.0.unbind( eventType [, handler ] )

    • eventType
      类型: String
      一个包含一个或多个 DOM 事件类型的字符串，比如 "click" 或 "submit," 或自定义的事件名。
    • handler
      类型: Function( Event eventObject )
      这个函数今后不在执行。

  • 添加的版本: 1.4.3.unbind( eventType, false )

    • eventType
      类型: String
      一个包含一个或多个 DOM 事件类型的字符串，比如 "click" 或 "submit," 或自定义的事件名。
    • false
      类型: Boolean
      解除绑定相应的'return false'函数，这个函数使用.bind( eventType,false )绑定。

  • 添加的版本: 1.0.unbind( event )

  • 添加的版本: 1.0.unbind()

    • 此签名不接受任何参数。

在jQuery 3.0中，.unbind()已被标记为弃用。从jQuery 1.7开始，它已经被.off()方法取代。所以我们不建议使用该方法。

用.bind()方法绑定的事件处理程序可以使用.unbind()移除。（注：从 jQuery 1.7开始， .on() 和 .off()方法是最好的元素上附加和移除事件处理程序的方法。）在最简单的情况下，不带参数的.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 );

通过传入 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)。

Using Namespaces（使用命名空间）

为了解除绑定处理程序，我们可以命名空间这个事件和使用此功能来缩小范围，我们轻松解除绑定的行动。上面讨论的.bind()方法， 当绑定一个处理程序时，命名空间的定义通过使用一个点（.）字符：

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

当一个处理程序以这种方式绑定，我们仍然可以正常的方式解除：

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

但是，如果我们要避免影响其他处理程序，我们可以更具体：

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

我们也可以解除命名空间中所有的处理程序，无论事件类型：

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

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

Using the Event Object（使用 Event 对象）

当我们希望解除从自身内部处理程序时可以使用.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 );
  }
});

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

例子:

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

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="//code.jquery.com/jquery-1.9.1.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>

Demo:

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

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

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

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

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

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.