off() 関数は、要素 削除するために使用されます。 ="_blank">イベント処理関数。 off()函数用于移除元素上绑定的一个或多个事件的事件处理函数。
off()函数主要用于解除由on()函数绑定的事件处理函数。
该函数属于jQuery对象(实例)。
jQuery 1.7 新增该函数。其主要有以下两种形式的用法：
用法一：
jQueryObject.off( [ events [, selector ] [, handler ] ] )
用法二：
jQueryObject.off( eventsMap [, selector ] )
| 参数 | 描述 |
|---|---|
| events | 可选/String类型一个或多个用空格分隔的事件类型和可选的命名空间，例如"click"、"focus click"、"keydown.myPlugin"。 |
| eventsMap | Object类型一个Object对象，其每个属性对应事件类型和可选的命名空间(参数events)，属性值对应绑定的事件处理函数(参数handler)。 |
| selector | 可选/String类型一个jQuery选择器，用于指定哪些后代元素可以触发绑定的事件。如果该参数为null或被省略，则表示当前元素自身绑定事件(实际触发者也可能是后代元素，只要事件流能到达当前元素即可)。 |
| handler | 可选/Function类型指定的事件处理函数。 |
off()函数将会移除当前匹配元素上为后代元素selector绑定的events事件的事件处理函数handler。
如果省略参数selector，则移除为任何元素绑定的事件处理函数。
参数selector必须与通过on()函数添加绑定时传入的选择器一致。
如果省略参数handler，则移除指定元素指定事件类型上绑定的所有事件处理函数。
如果省略了所有参数，则表示移除当前元素上为任何元素绑定的任何事件类型的任何事件处理函数。
off()函数的返回值为jQuery类型，返回当前jQuery对象本身。
实际上，off()函数的参数全是筛选条件，只有匹配所有参数条件的事件处理函数才会被移除。参数越多，限定条件就越多，被移除的范围就越小。
请参考下面这段初始HTML代码：
<span class="tag"><input<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"btn1"<span class="pln"> <span class="atn">type<span class="pun">=<span class="atv">"button"<span class="pln"> <span class="atn">value<span class="pun">=<span class="atv">"点击1"<span class="pln"> <span class="tag">/><span class="pln"><br/><span class="tag"><input<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"btn2"<span class="pln"> <span class="atn">type<span class="pun">=<span class="atv">"button"<span class="pln"> <span class="atn">value<span class="pun">=<span class="atv">"点击2"<span class="pln"> <span class="tag">/><span class="pln"><br/><span class="tag"><a<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"a1"<span class="pln"> <span class="atn">href<span class="pun">=<span class="atv">"#"<span class="tag">><span class="pln">CodePlayer<span class="tag"></a></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
首先，我们为上述button和元素绑定事件，然后使用off()函数解除事件绑定，相应的代码如下：
<span class="kwd">function<span class="pln"> btnClick1<span class="pun">(){<span class="pln"><br/> alert<span class="pun">(<span class="pln"> <span class="kwd">this<span class="pun">.<span class="pln">value <span class="pun">+<span class="pln"> <span class="str">"-1"<span class="pln"> <span class="pun">);<span class="pln"><br/><span class="pun">}<span class="pln"><br/><br/><span class="kwd">function<span class="pln"> btnClick2<span class="pun">(){<span class="pln"><br/> alert<span class="pun">(<span class="pln"> <span class="kwd">this<span class="pun">.<span class="pln">value <span class="pun">+<span class="pln"> <span class="str">"-2"<span class="pln"> <span class="pun">);<span class="pln"><br/><span class="pun">}<span class="pln"><br/><br/><span class="kwd">var<span class="pln"> $body <span class="pun">=<span class="pln"> $<span class="pun">(<span class="str">"body"<span class="pun">);<span class="pln"><br/><br/><span class="com">// 为所有button元素的click事件绑定事件处理函数btnClick1<span class="pln"><br/>$body<span class="pun">.<span class="pln">on<span class="pun">(<span class="str">"click"<span class="pun">,<span class="pln"> <span class="str">":button"<span class="pun">,<span class="pln"> btnClick1 <span class="pun">);<span class="pln"><br/><br/><span class="com">// 为所有button元素的click事件绑定事件处理函数btnClick2<span class="pln"><br/>$body<span class="pun">.<span class="pln">on<span class="pun">(<span class="str">"click"<span class="pun">,<span class="pln"> <span class="str">":button"<span class="pun">,<span class="pln"> btnClick2 <span class="pun">);<span class="pln"><br/><br/><span class="com">//为所有a元素绑定click、mouseover、mouseleave事件<span class="pln"><br/>$body<span class="pun">.<span class="pln">on<span class="pun">(<span class="str">"click mouseover mouseleave"<span class="pun">,<span class="pln"> <span class="str">"a"<span class="pun">,<span class="pln"> <span class="kwd">function<span class="pun">(<span class="pln">event<span class="pun">){<span class="pln"><br/> <span class="kwd">if<span class="pun">(<span class="pln"> event<span class="pun">.<span class="pln">type <span class="pun">==<span class="pln"> <span class="str">"click"<span class="pln"> <span class="pun">){<span class="pln"><br/> alert<span class="pun">(<span class="str">"点击事件"<span class="pun">);<span class="pln"><br/> <span class="pun">}<span class="kwd">else<span class="pln"> <span class="kwd">if<span class="pun">(<span class="pln"> event<span class="pun">.<span class="pln">type <span class="pun">==<span class="pln"> <span class="str">"mouseover"<span class="pln"> <span class="pun">){<span class="pln"><br/> $<span class="pun">(<span class="kwd">this<span class="pun">).<span class="pln">css<span class="pun">(<span class="str">"color"<span class="pun">,<span class="pln"> <span class="str">"red"<span class="pun">);<span class="pln"><br/> <span class="pun">}<span class="kwd">else<span class="pun">{<span class="pln"><br/> $<span class="pun">(<span class="kwd">this<span class="pun">).<span class="pln">css<span class="pun">(<span class="str">"color"<span class="pun">,<span class="pln"> <span class="str">"blue"<span class="pun">);<span class="pln"> <br/> <span class="pun">}<span class="pln"><br/><span class="pun">});<span class="pln"><br/><br/><br/><span class="com">// 移除body元素为所有button元素的click事件绑定的事件处理函数btnClick2<span class="pln"><br/><span class="com">// 点击按钮，btnClick1照样执行<span class="pln"><br/>$body<span class="pun">.<span class="pln">off<span class="pun">(<span class="str">"click"<span class="pun">,<span class="pln"> <span class="str">":button"<span class="pun">,<span class="pln"> btnClick2<span class="pun">);<span class="pln"><br/><br/><br/><span class="com">// 移除body元素为所有button元素的click事件绑定的所有事件处理函数(btnClick1和btnClick2)<span class="pln"><br/><span class="com">// 点击按钮，不会执行任何事件处理函数<span class="pln"><br/><span class="com">// $body.off("click", ":button");<span class="pln"><br/><br/><br/><span class="com">// 注意： $body.off("click", "#btn1"); 无法移除btn1的点击事件，off()函数指定的选择器必须与on()函数传入的选择器一致。<span class="pln"><br/><br/><br/><span class="com">// 移除body元素为所有元素(包括button和<a>元素)的click事件绑定的所有处理函数<span class="pln"><br/><span class="com">// 点击按钮或链接，都不会触发执行任何事件处理函数<span class="pln"><br/><span class="com">// $("body").off("click");<span class="pln"><br/><br/><br/><span class="com">// 移除body元素为所有元素的任何事件绑定的所有处理函数<span class="pln"><br/><span class="com">// 点击按钮，或点击链接或者鼠标移入/移出链接，都不会触发执行任何事件处理函数<span class="pln"><br/><span class="com">// $("body").off( );</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>运行代码(其他代码请自行复制到演示页面运行)
此外off()
off() 関数は主に、on() 関数によってバインドされているイベント処理関数のブロックを解除するために使用されます。 🎜🎜この関数は jQuery オブジェクト (インスタンス) に属します。 🎜<span class="kwd">var<span class="pln"> $btn1 <span class="pun">=<span class="pln"> $<span class="pun">(<span class="str">"#btn1"<span class="pun">);<span class="pln"><br/><br/>$btn1<span class="pun">.<span class="pln">on<span class="pun">(<span class="str">"click.foo.bar"<span class="pun">,<span class="pln"> <span class="kwd">function<span class="pun">(<span class="pln">event<span class="pun">){<span class="pln"><br/> alert<span class="pun">(<span class="str">"click-1"<span class="pun">);<span class="pln"><br/><span class="pun">});<span class="pln"><br/>$btn1<span class="pun">.<span class="pln">on<span class="pun">(<span class="str">"click.test"<span class="pun">,<span class="pln"> <span class="kwd">function<span class="pun">(<span class="pln">event<span class="pun">){<span class="pln"><br/> alert<span class="pun">(<span class="str">"click-2"<span class="pun">);<span class="pln"><br/><span class="pun">});<span class="pln"><br/>$btn1<span class="pun">.<span class="pln">on<span class="pun">(<span class="str">"click.test.foo"<span class="pun">,<span class="pln"> <span class="kwd">function<span class="pun">(<span class="pln">event<span class="pun">){<span class="pln"><br/> alert<span class="pun">(<span class="str">"click-3"<span class="pun">);<span class="pln"><br/><span class="pun">});<span class="pln"><br/><br/>$btn1<span class="pun">.<span class="pln">off<span class="pun">(<span class="str">"click.test"<span class="pun">);<span class="pln"> <span class="com">// 移除click-2、click-3<span class="pln"><br/><br/><span class="com">// $btn1.off("click.foo"); // 移除click-1、click-3<span class="pln"><br/><br/><span class="com">// $btn1.off("click.foo.bar"); // 移除click-1<span class="pln"><br/><br/><span class="com">// $btn1.off("click"); // 移除所有click事件处理函数(click-1、click-2、click-3)<span class="pln"><br/><br/><span class="com">// $btn1.off(".foo"); // 移除所有包含命名空间foo的事件处理函数，不仅仅是click事件</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>events) に対応し、属性値は対応します。バインディングへの特定のイベント処理関数 (パラメータ handler)。 null であるか省略されている場合、現在の要素自体がイベントにバインドされていることを意味します (イベント ストリームが現在の要素に到達できる限り、実際のトリガーは子孫要素である場合もあります)。 。 off()関数は、現在一致する要素の子孫要素 selectorを削除します。 >バインドされた events イベントのイベント ハンドラー関数 handler。 🎜🎜パラメータ selector が省略された場合、任意の要素にバインドされたイベント ハンドラーが削除されます。 🎜🎜パラメータ selector は、on() 関数を通じてバインディングを追加するときに渡されるセレクターと一致している必要があります。 🎜🎜パラメータ handler が省略された場合、指定された要素の指定されたイベント タイプにバインドされたすべてのイベント ハンドラーが削除されます。 🎜🎜すべてのパラメーターが省略された場合は、現在の要素の任意の要素にバインドされている任意のイベント タイプのイベント ハンドラーを削除することを意味します。 🎜off()関数戻り値はjQueryタイプで、現在のjQueryオブジェクト自体を返します。 🎜🎜実際には、off()関数パラメータ / a> はすべてフィルタリング条件です。すべてのパラメータ条件に一致するイベント処理関数のみが削除されます。パラメータが多いほど、より多くの条件が存在し、削除される範囲は小さくなります。 🎜off() 関数はイベントのバインドを解除します。対応するコードは次のとおりです: 🎜rrreee🎜 コードを実行します (実行するには他のコードをデモ ページにコピーしてください)🎜🎜 さらに、<code>off()関数は、指定された名前空間イベント バインディングのみを削除することもできます。 🎜りー以上がjquery off() メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
