jQuery 이벤트 처리 기본

🔔 이벤트 처리 기본

웹 페이지에서 사용자와 상호작용하는 가장 중요한 요소 중 하나는 바로 이벤트(Event)입니다. 마우스 클릭, 키보드 입력, 스크롤, 포커스 등의 행동에 반응하여 기능을 실행할 수 있도록 만드는 것이 이벤트 처리입니다. jQuery는 이 과정을 간단하고 직관적으로 처리할 수 있게 도와줍니다.

📌 이벤트 메서드 종류

jQuery는 다양한 이벤트 메서드를 제공합니다. 다음은 자주 사용하는 메서드들입니다.

• click() : 요소를 클릭했을 때
• hover() : 마우스를 올렸을 때/내렸을 때
• focus() : input 요소에 포커스가 갔을 때
• blur() : 포커스가 빠졌을 때
• keydown(), keyup(), keypress() : 키보드 입력
• submit() : 폼 제출
• change() : input, select 등 값이 바뀔 때

// 버튼 클릭 시 경고창 표시
$('#btn').click(function() {
  alert('버튼을 클릭했습니다!');
});

// 인풋 포커스 시 테두리 색상 변경
$('#username').focus(function() {
  $(this).css('border', '2px solid #27ae60');
});
  

🎯 이벤트 등록 방법

1. 직접 메서드 사용 (단축 메서드)

$('#btn').click(function() {
  alert('클릭됨');
});
  

2. .on() 메서드 사용 (일반적, 고급)

$('#btn').on('click', function() {
  alert('클릭(on)');
});
  

.on() 메서드는 여러 이벤트를 동시에 등록하거나 동적으로 생성된 요소에도 사용할 수 있어 실무에서 많이 사용됩니다.

🔄 이벤트 해제

.off() 메서드를 사용하여 특정 이벤트를 제거할 수 있습니다.

$('#btn').off('click'); // 클릭 이벤트 제거
  

🧪 실습 예제 : 간단한 이벤트 처리

버튼을 클릭하면 입력값을 받아 인사말을 출력하는 예제를 만들어 봅시다.

<input type="text" id="name" placeholder="이름을 입력하세요">
<button id="greetBtn">인사하기</button>
<p id="result"></p>


<script>
  $('#greetBtn').click(function() {
    const name = $('#name').val();
    $('#result').text('안녕하세요, ' + name + '님!');
  });
</script>
  

입력창에 이름을 입력하고 버튼을 클릭하면 인사말이 아래에 표시됩니다.

📎 이벤트 위임 (Event Delegation)

동적으로 추가된 요소에는 .on() 메서드에 부모 요소를 이용해 이벤트를 위임해야 작동합니다.

$('#list').on('click', 'li', function() {
  alert($(this).text() + ' 클릭됨');
});
  

위 코드는 #list 안의 li가 클릭되었을 때 동작합니다. 나중에 동적으로 추가된 li에도 적용됩니다.

📌 마무리

이벤트 처리는 사용자와 웹 페이지가 상호작용하는 핵심 기술입니다. jQuery는 이를 매우 간결하게 처리할 수 있게 해 주므로, 실무와 학습 모두에 큰 도움이 됩니다. 다음 강의에서는 AJAX와 비동기 통신을 배워 웹 페이지를 새로고침하지 않고도 서버와 데이터를 주고받는 법을 알아보겠습니다.