> 웹 프론트엔드 > JS 튜토리얼 > jquery에서 이벤트 바인딩을 해제하는 방법은 무엇입니까?

jquery에서 이벤트 바인딩을 해제하는 방법은 무엇입니까?

青灯夜游
풀어 주다: 2020-11-30 11:37:14
원래의
4098명이 탐색했습니다.

이벤트 바인딩 해제 방법: 1. unbind() 및 undelegate() 메서드를 사용하여 각각 바인딩() 및 위임() 메서드에 의해 바인딩된 이벤트를 바인딩 해제합니다. 2. on()에 의해 바인딩된 이벤트 바인딩을 해제하려면 off() 메서드를 사용합니다. ), 바인드() 및 대리자() 메소드.

jquery에서 이벤트 바인딩을 해제하는 방법은 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, jQuery 버전 1.7 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

관련 권장 사항: "jQuery 비디오 튜토리얼"

이벤트 바인딩 해제

요소가 이벤트에 바인딩된 후 특정 순간에 이벤트 처리가 더 이상 필요하지 않은 경우 이벤트 바인딩을 해제할 수 있습니다. 이벤트. jQuery는 각각 바인딩된 이벤트를 바인딩 해제하는 데 사용되는 unbind() 및 undelegate() 메서드를 제공합니다. 이 메서드는 매개 변수를 통해 연결 해제해야 하는 바인딩된 이벤트를 지정하기만 하면 됩니다. 메소드가 매개변수를 제공하지 않으면 요소의 모든 이벤트를 바인딩 해제한다는 의미입니다.

off() 메소드는 jQuery 1.7+에서 제공되며, on(), 바인딩() 및 대리자() 메소드에 의해 바인딩된 이벤트를 해제하는 데 사용됩니다. 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으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿