JQuery中的事件 (六.移除事件)

最新推荐文章于 2021-07-18 13:02:36 发布

张大仙是个妖怪

最新推荐文章于 2021-07-18 13:02:36 发布

阅读量5.2k

点赞数 2

分类专栏： # jQuery中的事件文章标签： jQuery JQuery中的事件

本文链接：https://blog.csdn.net/NDKHBWH/article/details/65627196

版权

jQuery中的事件专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.为同一个元素绑定多个事件

<script type="text/javascript">
	$(function(){
	   $('#btn').bind("click", function(){
					 $('#test').append("<p>我的绑定函数1</p>");
			  }).bind("click", function(){
					 $('#test').append("<p>我的绑定函数2</p>");
			  }).bind("click", function(){
				  	 $('#test').append("<p>我的绑定函数3</p>");
		      });
	})
</script>
</head>
<body>
<button id="btn">点击我</button>
<div id="test"></div>
</body>

2.清除指定注册的事件unbind("click"),和所有注册事件unbind();

<script type="text/javascript">
	$(function(){
	   $('#btn').bind("mouseover", function(){
					 $('#test').append("<p>我的绑定函数1</p>");
			  }).bind("click", function(){
					 $('#test').append("<p>我的绑定函数1</p>");
			  }).bind("click", function(){
					 $('#test').append("<p>我的绑定函数2</p>");
			  }).bind("click", function(){
				  	 $('#test').append("<p>我的绑定函数3</p>");
		      });
	   $('#delAll').click(function(){
			  $('#btn').unbind("click");
	   });
	    $('#delAll2').click(function(){
			  $('#btn').unbind();
	   });
	})
</script>
</head>
<body>
<button id="btn">点击我</button>
<div id="test"></div>
<button id="delAll">删除所有事件</button>
<button id="delAll2">删除所有事件2</button>
</body>

3.删除指定函数名事件unbind("functionname")

<script type="text/javascript">
	$(function(){
	   $('#btn').bind("click", myFun1 = function(){
					 $('#test').append("<p>我的绑定函数1</p>");
			  }).bind("click", myFun2 = function(){
					 $('#test').append("<p>我的绑定函数2</p>");
			  }).bind("click", myFun3 = function(){
				  	 $('#test').append("<p>我的绑定函数3</p>");
		      });
	   $('#delTwo').click(function(){
			  $('#btn').unbind("click",myFun2);
	   });
	})
</script>
</head>
<body>
<button id="btn">点击我</button>
<div id="test"></div>
<button id="delTwo">删除第二个事件</button>
</body>

4.指定事件触发1次

<script type="text/javascript">
	$(function(){
	   $('#btn').one("click", function(){
					 $('#test').append("<p>我的绑定函数1</p>");
			  }).one("click", function(){
					 $('#test').append("<p>我的绑定函数2</p>");
			  }).one("click", function(){
				  	 $('#test').append("<p>我的绑定函数3</p>");
		      });
	})
</script>
</head>
<body>
<button id="btn">点击我</button>
<div id="test"></div>
</body>