.off()
.off( events [, selector ] [, handler ] )
描述:删除所有的事件处理函数。
- events类型:PlainObject一个对象,在那里,字符串键代表一个或多个空格隔开的事件类型,以及可选的命名空间;值代表先前附加到这些事件上的处理函数。
- selector类型:String一个选择器,它必须匹配一个在附加事件处理函数时,原来传给
.on()
处理函数名。
- event类型:Event一个
jQuery.Event
对象。
该签名不接受任何参数。
.off()
方法删除了用.on()
附加的事件处理函数。参见本页中对派遣事件和直接绑定事件的讨论,以了解更多信息。不带参数地调用.off()
会删除所有附加到该元素上的处理函数。提供事件名称、命名空间、选择器,或者处理函数名的组合,可以指定要从元素上删除的事件处理函数。如果给定了多个筛选参数,只有与这些参数完全匹配的事件处理函数才会被删除。
如果提供了一个简单的事件名称,比如说"click"
,所有的那种类型的事件(直接事件以及委托事件)都会从jQuery集合中的元素上删除。在编写用作插件的代码的时候,或者基于大型代码而编程时,最佳实践是使用命名空间附加和删除事件,从而代码不会意外删除用别的代码附加的事件处理函数。在一个特定的命名空间中所有类型的事件都可以从一个元素上删除,只要提供一个命名空间,比如说".myPlugin"
。命名空间或者事件名称至少必须提供一种。
要想删除特定的委托事件处理函数,只要提供selector
参数。这个选择器字符串必须严格匹配在附加事件处理函数时,传递给.on()
函数的选择器字符串。要想从元素上删除所有的委托事件,而不删除非委托事件,请使用特殊值"**"
。
通过在handler
参数中指定函数名,可以删除一个处理函数。当jQuery附加一个事件处理函数时,它会给处理函数设定一个独一无二的id。通过jQuery.proxy()
或类似的机器获得的处理函数proxied,将具有同样的独一无二的id(代理函数),所以向.off()
传递代理处理函数,可能删除的函数会超过预期。在那种情况下,用命名空间附加并删除事件处理函数会更好。
和.on()
一样,你可以以一个对象的形式传递events
,而不是指定一个events
字符串以及handler
函数作为分开的参数。针对events
对象的键是事件名和/或命名空间;对象的值是处理函数或者特定的值false
。
示例
在彩色的按钮上添加并删除事件处理函数。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>off demo</title> <style> button { margin: 5px; } button#theone { color: red; background: yellow; } </style> <script src="https://code.jquery.com/jquery-1.10.2.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 flash() { $( "div" ).show().fadeOut( "slow" ); } $( "#bind" ).click(function() { $( "body" ) .on( "click", "#theone", flash ) .find( "#theone" ) .text( "Can Click!" ); }); $( "#unbind" ).click(function() { $( "body" ) .off( "click", "#theone", flash ) .find( "#theone" ) .text( "Does nothing..." ); }); </script> </body> </html>
演示结果
从所有的段落文本上删除所有的事件处理函数。
$( "p" ).off();
从所有的段落文本上删除所有被委托的点击事件处理函数。
$( "p" ).off( "click", "**" );
通过把一个先前绑定处理函数传为.off()
的第三个参数,来删除对它的绑定。
var foo = function() { // 处理某些事件的代码 }; // ... 现在当点击段落文本时会调用foo ... $( "body" ).on( "click", "p", foo ); // ... 不能再调用Foo了 $( "body" ).off( "click", "p", foo );
根据委托事件处理函数的命名空间来解绑所有的委托事件处理函数。
var validate = function() { // 校验表单项的代码 }; // 在.validator命名空间下面委托事件。 $( "form" ).on( "click.validator", "button", validate ); $( "form" ).on( "keypress.validator", "input[type='text']", validate ); // 删除在.validator命名空间中的事件处理函数。 $( "form" ).off( ".validator" );