Die Funktion
off() wird verwendet, um ein oder mehrere an ein Element gebundene Ereignisse Ereignisbehandlungsfunktion zu entfernen. Die Funktion
wird hauptsächlich zum Entsperren der durch die Funktion on() gebundenen Ereignisverarbeitungsfunktion verwendet. off()
-Objekt (Instanz). jQuery
1.7 Diese Funktion wurde hinzugefügt. Es gibt hauptsächlich die folgenden zwei Verwendungsformen:
Verwendung eins :
jQueryObject.off( [ events [, selector ] [, handler ] ] )
Verwendung zwei :
jQueryObject.off( eventsMap [, selector ] )
| Parameter | Beschreibung | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Ereignisse | Optional/String Geben Sie einen oder mehrere Ereignistypen ein, getrennt durch Leerzeichen und optional Namespace
| ||||||||||
| eventsMap | off()Objekttyp eins Objektobjekt selector, jedes seiner Attribute entspricht dem Ereignistyp und dem optionalen Namespace (Parameter events) und der Attributwert entspricht der gebundenen Ereignisverarbeitungsfunktion (Parameter handler) . | ||||||||||
| Selektor | Optional/String-Typ Ein jQuery-Selektor, der verwendet wird, um anzugeben, welche untergeordneten Elemente gebundene Ereignisse auslösen können. Wenn dieser Parameter | ||||||||||
| handler | Optionale/Ereignisbehandlungsfunktion, angegeben durch den Funktionstyp. Die Funktion |
selector entfernt den Ereignishandler des Ereignisses , das an das Nachkommenelement handler des aktuellen Abgleichs gebunden ist Element Funktion
Der Parameter off() muss mit dem übergebenen Selektor übereinstimmen, wenn eine Bindung über die Funktion on() hinzugefügt wird. Wenn der Parameter weggelassen wird, werden alle an den angegebenen Ereignistyp des angegebenen Elements gebundenen Event-Handler entfernt.
jQuery-Typ und gibt das aktuelle jQuery-Objekt selbst zurück.
<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>
Tatsächlich sind die Parameter der 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()Bitte beziehen Sie sich auf den folgenden anfänglichen HTML-Code:
<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>Das obige ist der detaillierte Inhalt vonjquery off()-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
