jquery如何解除事件绑定？

互联网 20-11-26

解除事件绑定的方法：1、使用unbind()和undelegate()方法，分别用于解除由bind()和delegate()方法所绑定的事件；2、使用off()方法，可以解除由on()、bind()和delegate()方法所绑定的事件。

本教程操作环境：windows7系统、jQuery1.7版，该方法适用于所有品牌电脑。

相关推荐：《jQuery视频教程》

解除事件绑定

在元素绑定事件之后，当在某个时刻不再需要该事件处理时，可以解除所绑定的事件。在jQuery中提供了unbind()和undelegate()方法，分别用于解除由bind()和delegate()方法所绑定的事件，通过参数指明需要解除的绑定事件即可。当方法没有提供参数时，表示解除该元素所有的事件绑定。

在jQuery1.7+中提供了off()方法，用于解除由on()、bind()和delegate()方法所绑定的事件。off()方法与on完全相同。

示例：解除事件绑定

<!doctype html><html>   <head> 	<meta charset="utf-8"> 	<title>jQuery基本操作事件绑定</title> 	<script type="text/javascript" src="js/jquery-1.7.js"> </script>    	<style type="text/css"> 		p{width:200px;height:200px;border:1px solid #666;} 		#leftp{float:left; margin:0 auto;} 		#rightp{float:right;} 	</style>   </head>   <body>   	<p id="leftp">     	<input type="button" value="bind事件绑定" id="bindBtn"/>         <input type="button" value="多事件绑定" id="manyBindBtn"/>         <input type="button" value="delegate事件绑定" id="delegateBindBtn"/>         <input type="button" value="解除事件绑定" id="removeBindBtn"/>     </p>     <p id="rightp">右侧展示区</p> 	<script type="text/javascript"> 		$(function(){ 			//使用bind()方法绑定事件 			$("#manyBindBtn").bind({ 				click:function(){$("#rightp").slideToggle();}, 				mouseover:function(){$("#rightp").css("background-color","red");}, 				mouseout:function(){$("#rightp").css("background-color","yellow");} 			}); 			//使用delegate()方法绑定事件 			$(document).delegate("#delegateBindBtn","click",function(){ 				$("#rightp").slideToggle(); 			}); 			//使用hover()方法绑定事件 			$("#rightp").hover(function(){ 				$(this).css("background-color","gray"); 			},function(){ 				$(this).css("background-color","white"); 			}); 			//使用on()方法绑定事件 			$("#leftp").on("click","#bindBtn", function(){ 				alert("使用bind()方法绑定事件处理"); 			}); 			//解除事件绑定 			$("#removeBindBtn").on("click",function(){ 				//1.使用unbind()解除click事件绑定 				//$("#manyBindBtn").unbind("click"); 				//2.使用unbind()解除该元素上的所有事件绑定 				//$("#manyBindBtn").unbind(); 				//3.使用off()方法解除bind()方法的click事件绑定 				$("#manyBindBtn").off("click"); 				//$(document).off("click","#manyBindBtn"); 				//4.使用off()方法解除该元素上的所有事件绑 				//$("#manyBindBtn").off();				 				//5.使用undelegate()方法解除delegate()方法绑定事件 				//$(document).undelegate("#delegateBindBtn","click"); 				//6.使用off()方法解除delegate()方法绑定事件 				$(document).off("click","#delegateBindBtn"); 				//7.使用off()方法解除on()方法的click事件绑定 				$("#leftp").off("click","#bindBtn"); 				//8.使用off()方法解除所有按钮上的所有事件绑定 				$("input[type=button]").off(); 			}); 		}); 	</script>   </body></html>