当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

JQuery .unbind()用法及代码示例


用法 
.unbind( eventType [, handler ] ) => 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
      取消绑定使用 .bind( eventType, false ) 绑定的相应 'return false' 函数。

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

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

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

从 jQuery 3.0 开始，.unbind() 已被弃用。自 jQuery 1.7 起，它被 .off() 方法取代，因此不鼓励使用它。

使用 .bind() 附加的事件处理程序可以使用 .unbind() 删除。在最简单的情况下，没有参数，.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 );

通过命名处理程序，我们可以确保不会意外删除其他函数。请注意，以下将 not 工作：

$( "#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" );

当我们开发plug-ins 或编写将来可能与其他事件处理代码交互的代码时，将命名空间附加到事件绑定特别有用。

使用事件对象

.unbind() 方法的第三种形式用于我们希望从自身内部取消绑定处理程序。例如，假设我们只希望触发一个事件处理程序 3 次：

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 变量，因此即使在处理程序的调用之间增加变量也会产生影响。

例子：

可以将事件绑定和取消绑定到彩色按钮。

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

演示：

要从所有段落中取消绑定所有事件，请编写：

$( "p" ).unbind();

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

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

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

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.

相关用法


注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 .unbind()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。