off() function is used to remove one or more events bound to an element Event handling function .
off()The function is mainly used to unblock the event processing function bound by the on() function.
This function belongs to the jQuery object (instance).
jQuery 1.7 Add this function. It mainly has the following two forms of usage:
Usage one:
jQueryObject.off( [ events [, selector ] [, handler ] ] )
Usage two:
jQueryObject.off( eventsMap [, selector ] )
| Parameter | Description |
|---|---|
| events | Optional/ String type one or more event types separated by spaces and optional namespace, such as "click", "focus click", "keydown.myPlugin". |
| eventsMap | Object type is an Object object, each of its properties corresponds to the event type and optional namespace (Parameter events), the attribute value corresponds to the bound event processing function (Parameter handler). |
| selector | Optional/String type A jQuery selector used to specify which descendant elements can trigger bound events. If this parameter is null or is omitted, it means that the current element itself is bound to the event (the actual triggerer may also be a descendant element, as long as the event stream can reach the current element). |
| handler | Optional/Event handling function specified by Function type. |
off()The function will remove the # bound to the descendant element selector on the current matching element. ##eventsEvent handling functionhandler.
selector is omitted, the event handler bound to any element is removed.
selectorMust be consistent with the selector passed in when adding binding through the on() function.
handler is omitted, all event handlers bound to the specified event type of the specified element will be removed.
off()The return value of the function is of jQuery type and returns the current jQuery object itself.
<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>
off()The function unbinds the event. The corresponding code is as follows:
<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 ()The function can also remove only the event binding of the specified namespace.
<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>The above is the detailed content of jquery off() method. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
