ホームページ > ウェブフロントエンド > jsチュートリアル > jQueryでイベントのバインドを解除するにはどうすればよいですか?

jQueryでイベントのバインドを解除するにはどうすればよいですか?

青灯夜游
リリース: 2020-11-30 11:37:14
オリジナル
4117 人が閲覧しました

イベントのバインドを解除するメソッド: 1. unbind() メソッドと undelegate() メソッドを使用します。これらは、それぞれ、bind() メソッドと delegate() メソッドによってバインドされたイベントのバインドを解除するために使用されます。 2. off() メソッドを使用します。を使用すると、on()、bind()、および delegate() メソッドによってバインドされたイベントのブロックを解除できます。

jQueryでイベントのバインドを解除するにはどうすればよいですか?

このチュートリアルの動作環境: Windows 7 システム、jQuery バージョン 1.7。この方法は、すべてのブランドのコンピューターに適しています。

関連する推奨事項: 「jQuery ビデオ チュートリアル

イベントのバインドを解除します

要素内イベントをバインドした後、ある時点でイベント処理が必要なくなった場合、バインドされたイベントのバインドを解除できます。 jQuery は unbind() メソッドと undelegate() メソッドを提供しており、これらはそれぞれ、bind() メソッドと delegate() メソッドによってバインドされたイベントをアンバインドするために使用されます。アンタイドする必要があるバインドされたイベントをパラメータで指定するだけです。メソッドがパラメータを提供しない場合、要素のすべてのイベントのバインドが解除されることを意味します。

off() メソッドは jQuery1.7 で提供されており、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 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート