jquery之 off()方法

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和3499910bf9dac5ae3c52d5ede7383485元素绑定事件，然后使用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()函数还可以只移除指定命名空间的事件绑定。

<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>

以上是jquery之 off()方法的详细内容。更多信息请关注PHP中文网其他相关文章！