uTools-Manuals/docs/jQuery/off.html

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">.off()</h1>
<div class="entry-meta">
						所属分类：<span class="category"><a href="/category/events/">事件</a> &gt; <a href="/category/events/event-handler-attachment/">绑定事件处理器</a></span>
<span class="pull-right">英文文档：<a href="https://api.jquery123.com/off/" target="_blank">.off()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="off1"><h2 class="section-title">
<span class="name">.off( events [, selector ] [, handler(eventObject) ] )</span><span class="returns">返回: <a href="/Types/#jQuery">jQuery</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>移除一个事件处理函数。</p>
<ul class="signatures">
<li class="signature" id="off-events-selector-handlereventObject">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.7/">1.7</a></span>.off( events [, selector ] [, handler(eventObject) ] )</h4>
<ul>
<li>
<div><strong>events</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"。</div>
</li>
<li>
<div><strong>selector</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>一个选择器，当绑定事件处理程序时最初传递给 <code>.on()</code>的那个。</div>
</li>
<li>
<div><strong>handler(eventObject)</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>事件处理程序函数以前附加事件上，或特殊值<code>false</code>.</div>
</li>
</ul>
</li>
<li class="signature" id="off-events-selector">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.7/">1.7</a></span>.off( events [, selector ] )</h4>
<ul>
<li>
<div><strong>events</strong></div>
<div>类型: <a href="/Types/#PlainObject">PlainObject</a>
</div>
<div>一个对象的字符串键所代表的一个或多个空格分隔的事件类型和可选的命名空间，值表示先前事件绑定的处理函数。</div>
</li>
<li>
<div><strong>selector</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>一个选择器，当绑定事件处理程序时，先前传递给 <code>.on()</code>的那个。</div>
</li>
</ul>
</li>
</ul>
<div class="longdesc" id="entry-longdesc">
<p><code>off()</code> 方法移除用<a href="/on"><code>.on()</code></a>绑定的事件处理程序。有关详细信息，请参阅该网页上delegated和directly绑定事件。可以通过提供组合的事件名，名字空间，选择器或处理函数来移除绑定在元素上指定的事件处理函数。<strong>当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除。</strong></p>
<p>如果一个简单的事件名称，比如提供<code>"click"</code>，那么<em>所有</em> 这种类型的事件（包括直接和委派）从元素上被移除。对于写插件，或者基于大型代码而编程时，最好是通过名字空间进行事件绑定或移除操作，这样就不会意外的移除其它代码添加的事件处理函数。在一个特定的命名空间中的所有类型的事件，可以从一个元素中删除，只是提供了一个命名空间，比如 <code>".myPlugin"</code>。在移除事件处理时，至少要提供名字空间或事件名。</p>
<p>要删除特定的委派事件处理程序，需要提供一个<code>selector</code> 的参数。该选择器字符串必须与之前通过 <code>.on()</code> 进行事件处理绑定时使用的选择器相一致。若要移除元素上所有的代理事件，而不移除任何非代理事件，请使用特殊值 "**"。</p>
<p>处理程序也可以删除<code>handler</code>参数指定名称的函数。当jQuery的绑定一个事件处理程序，它分配一个唯一的ID给处理函数。函数用<a href="/jQuery.proxy"><code>jQuery.proxy()</code></a>代理或类似有相同的唯一ID机制（代理函数），因此，通过代理处理程序<code>.off</code> 可能会删除比预期更多的处理程序。在这些情况下，最好是附加和移除事件处理程序，使用命名空间。</p>
<p>和<code>.on()</code>一样，你可以传递一个 <code>events</code>参数明确的指定而不是用<code>events</code> 和 <code>handler</code>作为单独参数。键是事件类型及可选的名字空间，值是绑定的处理函数，或者是特殊值<code>false</code>。</p>
</div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4>Example: <span class="desc">为有颜色的按钮添加并移除事件处理。</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</div>
<div class="line n30">30</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code><span class="tag">button</span> <span class="rules">{ <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">5</span>px;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="tag">button</span><span class="id">#theone</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">red;</span></span> <span class="rule"><span class="attribute">background</span>:<span class="value">yellow;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">id</span>=<span class="value">"theone"</span>&gt;</span>Does nothing...<span class="tag">&lt;/<span class="title">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">button</span> <span class="attribute">id</span>=<span class="value">"bind"</span>&gt;</span>Add Click<span class="tag">&lt;/<span class="title">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">button</span> <span class="attribute">id</span>=<span class="value">"unbind"</span>&gt;</span>Remove Click<span class="tag">&lt;/<span class="title">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">style</span>=<span class="value">"display:none;"</span>&gt;</span>Click!<span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code><span class="function"><span class="keyword">function</span> <span class="title">aClick</span><span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code>  $(<span class="string">"div"</span>).show().fadeOut(<span class="string">"slow"</span>);</code></div></div><div class="container"><div class="line"><code>}</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"#bind"</span>).click(<span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code>  $(<span class="string">"body"</span>).on(<span class="string">"click"</span>, <span class="string">"#theone"</span>, aClick)</code></div></div><div class="container"><div class="line"><code>    .find(<span class="string">"#theone"</span>).text(<span class="string">"Can Click!"</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"#unbind"</span>).click(<span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code>  $(<span class="string">"body"</span>).off(<span class="string">"click"</span>, <span class="string">"#theone"</span>, aClick)</code></div></div><div class="container"><div class="line"><code>    .find(<span class="string">"#theone"</span>).text(<span class="string">"Does nothing..."</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div class="entry-example" id="example-1">
<h4>Example: <span class="desc">移除所有段落上的事件：</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">"p"</span>).off()</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-2">
<h4>Example: <span class="desc">R移除所有段落上的代理事件：</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">"p"</span>).off( <span class="string">"click"</span>, <span class="string">"**"</span> )</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-3">
<h4>Example: <span class="desc">通过传入的第三个参数，仅移除先前绑定的事件处理函数：</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="keyword">var</span> foo = <span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code>  <span class="comment">// code to handle some kind of event</span></code></div></div><div class="container"><div class="line"><code>};</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// ... now foo will be called when paragraphs are clicked ...</span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"body"</span>).on(<span class="string">"click"</span>, <span class="string">"p"</span>, foo);</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// ... foo will no longer be called.</span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"body"</span>).off(<span class="string">"click"</span>, <span class="string">"p"</span>, foo); </code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-4">
<h4>Example: <span class="desc">通过指定名字空间，解除绑定表单上所有的代理事件：</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="keyword">var</span> validate = <span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code>  <span class="comment">// code to validate form entries</span></code></div></div><div class="container"><div class="line"><code>};</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// delegate events under the ".validator" namespace</span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"form"</span>).on(<span class="string">"click.validator"</span>, <span class="string">"button"</span>, validate);</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>$(<span class="string">"form"</span>).on(<span class="string">"keypress.validator"</span>, <span class="string">"input[type='text']"</span>, validate);</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// remove event handlers in the ".validator" namespace</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>$(<span class="string">"form"</span>).off(<span class="string">".validator"</span>);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div></section>
</div></article> </div>
</article>