您的位置是:网站首页>Javascript编程Javascript编程

jquery如何解除事件绑定?

少儿编程网2021-04-07 16:06:05Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介解除事件绑定的方法:1、使用unbind()和undelegate()方法,分别用于解除由bind()和delegate()方法所绑定的事件;2、使用off()方法,可以解除由on()、bind()和delegate()方法所绑定的事件。本教程操作环境:windows7系统、jQuery1.7版,该

解除事件绑定的方法:1、使用unbind()和undelegate()方法,分别用于解除由bind()和delegate()方法所绑定的事件;2、使用off()方法,可以解除由on()、bind()和delegate()方法所绑定的事件。xAE少儿编程网-https://www.pxcodes.com

xAE少儿编程网-https://www.pxcodes.com

本教程操作环境:windows7系统、jQuery1.7版,该方法适用于所有品牌电脑。xAE少儿编程网-https://www.pxcodes.com

相关推荐:《jQuery视频教程》xAE少儿编程网-https://www.pxcodes.com

解除事件绑定xAE少儿编程网-https://www.pxcodes.com

在元素绑定事件之后,当在某个时刻不再需要该事件处理时,可以解除所绑定的事件。在jQuery中提供了unbind()和undelegate()方法,分别用于解除由bind()和delegate()方法所绑定的事件,通过参数指明需要解除的绑定事件即可。当方法没有提供参数时,表示解除该元素所有的事件绑定。xAE少儿编程网-https://www.pxcodes.com

在jQuery1.7+中提供了off()方法,用于解除由on()、bind()和delegate()方法所绑定的事件。off()方法与on完全相同。xAE少儿编程网-https://www.pxcodes.com

示例:解除事件绑定xAE少儿编程网-https://www.pxcodes.com

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

xAE少儿编程网-https://www.pxcodes.com

更多编程相关知识,请访问:编程课程!!

以上就是jquery如何解除事件绑定?的详细内容,更多请关注少儿编程网其它相关文章!xAE少儿编程网-https://www.pxcodes.com

来源:php中文网xAE少儿编程网-https://www.pxcodes.com


相关文章:

支持一下 ( )

jquery如何解除事件绑定?

      匿名评论
    • 评论
    人参与,条评论
    jquery如何解除事件绑定?

微信公众号

免费视频教程

先知道