首頁 > web前端 > js教程 > jquery如何解除事件綁定?

jquery如何解除事件綁定?

青灯夜游
發布: 2020-11-30 11:37:14
原創
4119 人瀏覽過

解除事件綁定的方法:1、使用unbind()和undelegate()方法,分別用來解除由bind()和delegate()方法所綁定的事件;2、使用off()方法,可以解除由on()、bind()和delegate()方法所綁定的事件。

jquery如何解除事件綁定?

本教學操作環境:windows7系統、jQuery1.7版,此方法適用於所有品牌電腦。

相關推薦:《jQuery影片教學

#解除事件綁定

在元素綁定事件之後,當在某個時刻不再需要該事件處理時,可以解除所綁定的事件。在jQuery中提供了unbind()和undelegate()方法,分別用於解除由bind()和delegate()方法所綁定的事件,透過參數指明需要解除的綁定事件即可。當方法沒有提供參數時,表示解除該元素所有的事件綁定。

在jQuery1.7 中提供了off()方法,用於解除由on()、bind()和delegate()方法所綁定的事件。 off()方法與on完全相同。

範例:解除事件綁定

nbsp;html>
  
	<meta>
	<title>jQuery基本操作事件绑定</title>
	<script> </script>
   	<style>
		p{width:200px;height:200px;border:1px solid #666;}
		#leftp{float:left; margin:0 auto;}
		#rightp{float:right;}
	</style>
  
  
  	<p>
    	<input>
        <input>
        <input>
        <input>
    </p>
    <p>右侧展示区</p>
	<script>
		$(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>
  
登入後複製

jquery如何解除事件綁定?

更多程式相關知識,請造訪:程式設計課程! !

以上是jquery如何解除事件綁定?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板