jQuery---解除事件

jQuery—解除事件

常见的解除事件有三种，选用时，往往取决与你绑定事件所用的关键字：

一、常用解除绑定事件

举例：

//绑定事件，使用id选择器给btn1绑定点击事件
			$("#btn1").click(function(){
				console.log("点击事件")
			}).mouseenter(function(){
				console.log("鼠标聚焦事件")
			})
			
			//点击第二个按钮，解除第一个按钮事件
			$("#btn2").click(function(){
				$("#btn1").off("mouseenter");      //这里是解绑函数，使用off函数，可以添加参数解绑一个绑定事件，或者不加参数，默认都解绑
				console.log("第一个按钮事件解绑")
			})

效果显示：

注意：off函数参数可选，当只写一个事件名称时候，则解除相对应的事件，当无参数时，默认解除该元素的所有绑定事件。

二、on函数解除绑定事件

on函数绑定事件和常用绑定事件的解除绑定都可以使用off函数。

举例：

//绑定事件，使用id选择器给btn1绑定点击事件
			$("#btn1").on("click",function(){
				console.log("点击事件")
			}).on("mouseenter",function(){  //注意这里的on函数的链式编程
				console.log("鼠标聚焦事件")
			})
			
			//点击第二个按钮，解除第一个按钮事件
			$("#btn2").click(function(){
				$("#btn1").off("mouseenter");      //这里是解绑函数，使用off函数，
				console.log("第一个按钮聚焦事件解绑")
			})

效果展示：

注意：这里on函数的链式编程需要注意，具体的off函数使用规则和上一个例子相同。

三、bind函数解除绑定事件

$("#btn1").bind({"click":function(){
								console.log("点击事件")
							},
							"mouseenter":function(){
								console.log("鼠标聚焦事件")
							},
							"mouseleave":function(){
								console.log("鼠标离焦事件")
							}})		
			
			$("#btn2").bind("click",function(){
				$("#btn1").unbind("click");   //unbind解除了所有的绑定事件
				console.log("解除点击事件")
			})

效果展示：

可以发现这里的unbind函数也是和off函数如出一辙，有参数时解除参数对应的事件，无参数则解除该元素的所有绑定事件。

思考

思考：那么off和unbind函数可以换着用吗？
答案：可以换着用。 演示代码如下：

$("#btn1").on("click",function(){
				console.log("点击事件")
			}).on("mouseenter",function(){ 
				console.log("鼠标聚焦事件")
			}).on("mouseleave",function(){  //注意这里的on函数的链式编程
				console.log("鼠标失焦事件")
			})
			
			$("#btn2").bind("click",function(){
				$("#btn1").unbind("click");   //unbind解除了所有的绑定事件
				console.log("解除点击事件")
			})

效果展示：

四、delegate函数解除绑定事件

delegate函数主要是针对父子节点进行绑定事件的，具体可以参看我的另一篇文章—《jQuery—绑定事件》

举例：

$("div").delegate("p","click",function(){
				console.log("p标签---鼠标-点击-事件")
			}).delegate("p","mouseenter",function(){
				console.log("p标签---鼠标-聚焦-事件")
			}).delegate("button","mouseenter",function(){
				console.log("按钮---鼠标-聚焦-事件")
			}).delegate("button","click",function(){
				console.log("按钮---鼠标-点击-事件")})
			
			$("#btn2").click(function(){
				$("div").undelegate("button","click")
				console.log("button解除点击事件")
			})

效果展示：

注意delegate的使用场景，它一般在绑定含有父子节点关系的标签上的作用比较大，注意这里的参数第一个和第二个参数同时写，是解除指定标签的指定事件，同时不写，是解除父标签下的所有标签的所有事件，写一个参数或者是两个以上参数，undeleagte函数不发挥作用。

五、总结

函数	备注
off(“事件名称”)	写一个参数，解除该标签的指定事件
off()	不写参数，解除该标签的所有事件
unbind(“事件名称”)	写一个参数，解除该标签的指定事件
unbind()	不写参数，解除该标签的所有事件
undelegate(“标签名称”,“事件名称”)	写亮个参数，解除指定标签类的指定事件
undelegate()	不写参数，解除父标签下的所有标签的所有事件

以上例子中涉及的绑定事件以及链式编程，可以参看我的其他两篇文章《jQuery—绑定事件》和《jQuery—链式编程》