[jQuery] 이벤트 처리와 핸들링

이벤트(Event)는 웹 페이지에서 발생하는 사용자의 다양한 동작(클릭, 키 입력, 마우스 움직임 등) 을 의미한다. jQuery에서는 이벤트 처리(Event Handling)을 통해 특정 요소에서 발생한 이벤트를 감지하고, 원하는 동작을 수행할 수 있다.

---

1. jQuery 이벤트 처리기 연결

1.1 기본 이벤트 처리

jQuery에서는 .on() 메서드를 사용하여 이벤트를 처리할 수 있다.

기본 문법

$(선택자).on("이벤트명", 함수);

• 특정 요소에 이벤트가 발생하면 함수가 실행됨
• click, keydown, mouseenter 등 다양한 이벤트를 처리 가능

예제: 버튼 클릭 시 메시지 출력

<button id="myButton">클릭하세요.</button>
<p id="result"></p>

<script>
  	$(document).ready(function() {
  		$("#myButton").on("click", function() {
  			$("#result").text("버튼이 클릭되었습니다.");
  		});
  	});
</script>

• 버튼을 클릭하면 #result 요소의 내용이 변경됨.

---

2. jQuery에서 사용할 수 있는 주요 이벤트 ㅇ형

이벤트 유형	설명
click	요소를 클릭했을 때
dblclick	요소를 더블 클릭했을 때
mouseenter	마우스가 요소 위로 올라갔을 때
mouseleave	마우스가 요소에서 벗어났을 때
keydown	키보드를 눌렀을 때
keyup	키를 눌렀다가 뗏을 때
focus	입력 필드가 포커스를 받을 때
blur	입력 필드에서 포커스가 해제될 때

예제: 입력 필드에서 포커스를 받으면 배경색 변경

<input type="text" id="name" placeholder="이름 입력">

<script>
	$(document).ready(function() {
  		$("#name").on("focus", function() {
  			$(this).css("background-color", "yellow");
 		});
  
  		$("#name").on("blur", function() {
  			$(this).css("background-color", "white");
  		});
 	});
</script>

• 입력 필드의 포커스를 받으면 배경색이 노란색으로 변경되고, 포커스를 잃으면 원래대로 돌아감

---

3. 이벤트 핸들링

이벤트 핸들링(Event Handling)은 선택한 요소에서 발생한 이벤트에 대한 응답을 처리하는 과정이다.

예제: 버튼 클릭 시 텍스트 변경

<button id="btn">클릭하세요</button>
<p id="msg">기본 텍스트</p>

<script>
  	$(document).ready(function() {
  		$("#btn").on("click", function() {
  			$("#msg").text("버튼이 클릭되었습니다.");
  		});
  	});
</script>

• 버튼을 클릭하면 <p>의 텍스트가 변경됨

---

4. 이벤트 위임 (Event Delegation)

이벤트 위임은 부모 요소에 이벤트를 설정하고, 해당 이벤트를 자식 요소에서 감지하는 기법이다.
-> 동적으로 생성된 요소에도 이벤트를 적용할 수 있다.

---

예제: 리스트 항목 클릭 이벤트 (동적 요소 포함)

<ul id="myList">
  	<li>항목1</li>
  	<li>항목1</li>
  	<li>항목1</li>
  	<li>항목1</li>
</ul>
<button id="addItem">항목 추가</button>
<p id="result"><p>

<script>
	$(document).ready(function() {
  		$("#myList").on("click", "li", function() {
  			var clickedItem = $(this).text();
  			$("#result").text("선택된 항목: " + clickedItem);
  		});
  		
  		$("#addItem").on("click", function() {
  			#("#myList").append("<li>새 항목</li>");
  		});
  	});
</script>

• <li> 요소가 추가되어도 클릭 이벤트가 정상 동작함
• 동적으로 생성된 요소에도 이벤트를 적용할 때 유용

---

5. 이벤트 제거

이벤트 제거는 .off() 메서드를 사용하여 등록된 이벤트를 삭제하는 방식이다.

예제: 클릭 이벤트 제거

<button id="myButton">클릭하세요.</button>
<p id="result"></p>

<script>
  	$(document).ready(function() {
  		function handleClick() {
  			$("#result").text("버튼이 클릭되었습니다.");
  		}
  		
  		$("#myButton").on("click", handleClick);
  		
  		$("#myButton").on("dblclick", function() {
  			#("#myButton").off("click", handleClick)"
  			#("#result").text("이벤트가 제거되었습니다.");
  		});
  	});
</script>

• 버튼을 클릭하면 텍스트 변경, 더블 클릭하면 이벤트 제거

---

6. 기본 동작 차단

event.preventDefault()를 사용하면 브라우저의 기본 동작(페이지 이동, 폼 제출 등)을 막을 수 있음.

예제: 링크 클릭 시 기본 동작 차단

<a href="https://www.example.com" id="myLink">이동</a>

<script>
  	$(document).ready(function() {
  		$("#myLink").on("click", function(event) {
  			event.preventDefault();
  			alert("기본 동작이 차단되었습니다.");
  		});
  	});
</script>

• 클릭해도 페이지 이동 안 됨