[jQuery] bind & unbind

티스토리 뷰

WEB/jQuery

[jQuery] bind & unbind

춘햄 2021. 6. 7. 13:49

jQuery는 다음과 같은 형식으로 특정 요소의 이벤트 속성과 이벤트를 bind로 묶어 이벤트를 처리할 수 있다.

// 클릭 요소와 이벤트를 바인딩
$('#btn').bind("click", function() {
  alert("버튼 클릭!!");
});

또한 unbind를 활용하여 다시 이벤트 등록을 해제할 수도 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 처리기 해제</title>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		// unbind() 이벤트 해제 예제
		
		$('#btn').bind("click", function() {
			alert("#btn 클릭!");
		});
		
		$('#btnUnbind').click(function() {
			$('#btn').unbind("click");
		});
	
	});
</script>

</head>

<body>

	<div id="my">
		<input type="button" id="btn" value="버튼" class="hover" /> 
		<input type="button" id="btnUnbind" value="이벤트 해제" class="hover" />
	</div>

</body>

</html>

혹은 굳이 bind한 함수가 아니더라도, unbind를 활용하여 해제할 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 처리기 해제</title>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		// unbind() 이벤트 해제 예제
		
		$('#btn').click( function() {
			alert("#btn 클릭!");
		});
		
		$('#btnUnbind').click(function() {
			$('#btn').unbind("click");
		});
	
	});
</script>

</head>

<body>

	<div id="my">
		<input type="button" id="btn" value="버튼" class="hover" /> 
		<input type="button" id="btnUnbind" value="이벤트 해제" class="hover" />
	</div>

</body>

</html>

'WEB > jQuery' 카테고리의 다른 글

[jQuery] 동적으로 요소 추가 (0)	2021.06.07
[jQuery] Traversing (0)	2021.06.07
[jQuery] 다양한 Selector 이용 (0)	2021.06.07
[jQuery] 요소의 반복 each() (0)	2021.06.07
[jQuery] form 태그 내 입력 값, 선택 값 제어 (0)	2021.06.07