浅谈jquery之on()绑定事件和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()函数的参数全是筛选条件,只有匹配所有参数条件的事件处理函数才会被移除。参数越多,限定条件就越多,被移除的范围就越小。

off()方法的代码示例:

容易忽略的点:off所解除元素的绑定事件,其中选择器必须和on绑定事件时所用的选择器一致。

html代码

<input type="button" value="点击1" /> <input type="button" value="点击2" /> <a href="#">CodePlayer</a>

页面加载时执行的jquery代码

function btnClick1(){ alert( this.value + "-1" ); } function btnClick2(){ alert( this.value + "-2" ); } var $body = $("body"); // 给按钮1绑定点击 $body.on("click", "#btn1", btnClick1 ); // 给按钮2绑定点击 $body.on("click", "#btn2", btnClick2 ); //为所有a元素绑定click、mouseover、mouseleave事件 $body.on("click mouseover mouseleave", "a", function(event){ if( event.type == "click" ){ $body.off("click", "#btn1");//取消btn1的绑定事件。成功执行 alert("点击事件"); alert("ddd"); }else if( event.type == "mouseover" ){ $(this).css("color", "red"); }else{ $(this).css("color", "blue"); } }); // 移除body元素为所有button元素的click事件绑定的事件处理函数btnClick2 // 点击按钮,btnClick1照样执行 $body.off("click", ":button", btnClick2); // 点击按钮1,不会执行任何事件处理函数 // $body.off("click", "#btn1"); // 注意: $body.off("click", ":button"); 无法移除btn1的点击事件,off()函数指定的选择器必须与on()函数传入的选择器一致。 // 移除body元素为所有元素(包括button和<a>元素)的click事件绑定的所有处理函数 // 点击按钮或链接,都不会触发执行任何事件处理函数 // $("body").off("click"); // 移除body元素为所有元素的任何事件绑定的所有处理函数 // 点击按钮,或点击链接或者鼠标移入/移出链接,都不会触发执行任何事件处理函数 // $("body").off( );

on()函数用于为指定元素的一个或多个事件绑定事件处理函数。

此外,你还可以额外传递给事件处理函数一些所需的数据。

从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind()、 delegate()、 live()等事件函数。

即使是执行on()函数之后新添加的元素,只要它符合条件,绑定的事件处理函数也对其有效。

此外,该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

要删除通过on()绑定的事件,请使用off()函数。如果要附加一个事件,只执行一次,然后删除自己,请使用one()函数。

该函数属于jQuery对象(实例)。

语法

jQuery 1.7 新增该函数。其主要有以下两种形式的用法:

用法一:

jQueryObject.on( events [, selector ] [, data ], handler )

用法二:

jQueryObject.on( eventsMap [, selector ] [, data ] )

参数

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzgpfw.html