文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

.off()

发布于 2017-09-11 17:06:13 字数 3986 浏览 1153 评论 0 收藏 0

所属分类：事件 > 绑定事件处理器

.off( events [, selector ] [, handler(eventObject) ] )返回: jQuery

描述: 移除一个事件处理函数。

添加的版本: 1.7.off( events [, selector ] [, handler(eventObject) ] )
- events 类型: String 一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"。
- selector 类型: String 一个选择器，当绑定事件处理程序时最初传递给 .on()的那个。
- handler(eventObject) 类型: Function() 事件处理程序函数以前附加事件上，或特殊值false.
添加的版本: 1.7.off( events [, selector ] )
- events 类型: PlainObject 一个对象的字符串键所代表的一个或多个空格分隔的事件类型和可选的命名空间，值表示先前事件绑定的处理函数。
- selector 类型: String 一个选择器，当绑定事件处理程序时，先前传递给 .on()的那个。

off() 方法移除用.on()绑定的事件处理程序。有关详细信息，请参阅该网页上delegated和directly绑定事件。可以通过提供组合的事件名，名字空间，选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除。

如果一个简单的事件名称，比如提供"click"，那么所有这种类型的事件（包括直接和委派）从元素上被移除。对于写插件，或者基于大型代码而编程时，最好是通过名字空间进行事件绑定或移除操作，这样就不会意外的移除其它代码添加的事件处理函数。在一个特定的命名空间中的所有类型的事件，可以从一个元素中删除，只是提供了一个命名空间，比如 ".myPlugin"。在移除事件处理时，至少要提供名字空间或事件名。

要删除特定的委派事件处理程序，需要提供一个selector 的参数。该选择器字符串必须与之前通过 .on() 进行事件处理绑定时使用的选择器相一致。若要移除元素上所有的代理事件，而不移除任何非代理事件，请使用特殊值 "**"。

处理程序也可以删除handler参数指定名称的函数。当jQuery的绑定一个事件处理程序，它分配一个唯一的ID给处理函数。函数用jQuery.proxy()代理或类似有相同的唯一ID机制（代理函数），因此，通过代理处理程序.off 可能会删除比预期更多的处理程序。在这些情况下，最好是附加和移除事件处理程序，使用命名空间。

和.on()一样，你可以传递一个 events参数明确的指定而不是用events 和 handler作为单独参数。键是事件类型及可选的名字空间，值是绑定的处理函数，或者是特殊值false。

例子:

Example: 为有颜色的按钮添加并移除事件处理。

<!DOCTYPE html>
<html>
<head>
  <style>
button { margin:5px; }
button#theone { color:red; background:yellow; }
</style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <button id="theone">Does nothing...</button>
<button id="bind">Add Click</button>
<button id="unbind">Remove Click</button>
<div style="display:none;">Click!</div>
<script>
function aClick() {
  $("div").show().fadeOut("slow");
}
$("#bind").click(function () {
  $("body").on("click", "#theone", aClick)
    .find("#theone").text("Can Click!");
});
$("#unbind").click(function () {
  $("body").off("click", "#theone", aClick)
    .find("#theone").text("Does nothing...");
});
</script>
 
</body>
</html>

Example: 移除所有段落上的事件：

$("p").off()

Example: R移除所有段落上的代理事件：

$("p").off( "click", "**" )

Example: 通过传入的第三个参数，仅移除先前绑定的事件处理函数：

var foo = function () {
  // code to handle some kind of event
};
 
// ... now foo will be called when paragraphs are clicked ...
$("body").on("click", "p", foo);
 
// ... foo will no longer be called.
$("body").off("click", "p", foo);

Example: 通过指定名字空间，解除绑定表单上所有的代理事件：

var validate = function () {
  // code to validate form entries
};
 
// delegate events under the ".validator" namespace
$("form").on("click.validator", "button", validate);
 
$("form").on("keypress.validator", "input[type='text']", validate);
 
// remove event handlers in the ".validator" namespace
 
$("form").off(".validator");

分享到QQ

分享到微博