[jQuery] 04. 이벤트(Event) 완전 정리 (click / on / this / preventDefault / 이벤트 위임)

jQuery에서 가장 “실무처럼 보이는” 구간이 바로 이벤트(Event)입니다. 화면에 있는 버튼을 클릭했을 때, 입력창에 글을 썼을 때, 폼을 제출했을 때처럼 사용자 행동(또는 브라우저 동작)에 반응해서 코드를 실행하는 개념입니다.

이번 글은 단순히 .click()만 소개하는 게 아니라, 왜 on()을 많이 쓰는지, 이벤트 위임이 왜 필요한지까지 “깊게” 정리합니다.

1. 이벤트(Event)란 무엇인가?

이벤트는 “어떤 일이 발생했다”는 신호입니다. 예를 들면 다음이 전부 이벤트입니다.

클릭: click
더블클릭: dblclick
키보드 입력: keydown / keyup
입력값 변경: change / input
마우스 진입/이탈: mouseenter / mouseleave
폼 전송: submit

즉, 이벤트를 다룬다는 건 “어떤 일이 발생했을 때 무엇을 할지”를 정하는 것입니다.

2. 이벤트 등록 방법: click() vs on()

jQuery로 이벤트를 등록하는 방식은 크게 2가지가 많이 보입니다.

① .click() (간단하지만 종류가 제한됨)


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

이 방식은 짧고 편하지만, 이벤트 종류가 다양해질수록 통일성이 떨어질 수 있습니다.

② .on("click", ...) (추천: 확장성 좋음)


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

on()은 “어떤 이벤트든 한 문법으로 처리”할 수 있고, 뒤에서 설명할 이벤트 위임까지 가능해서 실전에서 더 자주 씁니다.

3. 이벤트 함수 안에서 this는 무엇인가?

이벤트 함수 안에서 this는 “이벤트가 발생한 바로 그 요소”를 의미합니다. 다만 jQuery 메서드를 쓰려면 $(this)로 감싸야 합니다.


$(".item").on("click", function() {
  // this: 클릭된 DOM 요소(그 자체)
  // $(this): 클릭된 요소를 jQuery로 감싼 객체
  $(this).addClass("active");
});

정리: this는 “대상”, $(this)는 “jQuery 기능을 쓰기 위한 형태”

4. 기본 동작 막기: preventDefault() / stopPropagation()

이벤트는 기본 동작이 있는 경우가 많습니다. 예를 들어:

<a href="..."> 를 클릭하면 페이지가 이동
<form> submit 되면 새로고침 또는 페이지 이동

① preventDefault(): 기본 동작 막기


$("a").on("click", function(e) {
  e.preventDefault(); // 링크 이동 막기
  alert("이동을 막고 알림만 띄움");
});

② stopPropagation(): 이벤트 전파(버블링) 막기


$("#child").on("click", function(e) {
  e.stopPropagation(); // 부모로 이벤트가 전달되는 걸 막음
  alert("자식만 실행");
});

③ return false는 뭘까?

jQuery에서는 이벤트 함수에서 return false;를 하면 보통 다음 두 개를 함께 처리한 효과가 납니다.

기본 동작 막기 (preventDefault)
이벤트 전파 막기 (stopPropagation)

다만 팀/프로젝트마다 스타일이 다를 수 있어서, 명확하게 쓰고 싶으면 preventDefault() / stopPropagation()을 직접 쓰는 것이 이해에 더 좋습니다.

5. 이벤트 버블링(Bubbling) 이해하기

이벤트는 보통 “안쪽 요소에서 바깥쪽 요소로” 전달됩니다. 이 흐름을 이벤트 버블링이라고 합니다.

예를 들어, 버튼이 div 안에 있을 때 버튼을 클릭하면 버튼의 click이 실행된 뒤, 그 상위 div의 click도 실행될 수 있습니다.

📌 버블링 확인 예제


<div id="parent" style="padding:20px;border:1px solid #ddd;">
  부모 영역
  <button id="child">자식 버튼</button>
</div>

<script>
  $("#parent").on("click", function() {
    console.log("부모 클릭 이벤트 실행");
  });

  $("#child").on("click", function() {
    console.log("자식 클릭 이벤트 실행");
  });
</script>

📌 OUTPUT

자식 버튼을 클릭하면 콘솔에 자식 클릭 이벤트 실행이 먼저 출력됩니다.
그 다음 콘솔에 부모 클릭 이벤트 실행이 출력될 수 있습니다. (버블링 때문)

이 버블링 구조를 이해해야 다음 파트인 이벤트 위임을 이해할 수 있습니다.

6. 이벤트 위임(Delegation)이 왜 필요할까?

실전에서 많이 겪는 문제: 처음엔 클릭이 되는데, 나중에 추가된 요소는 클릭이 안 된다 입니다.

이유는 간단합니다.

직접 바인딩 방식은 “현재 존재하는 요소”에만 이벤트가 붙습니다.
나중에 추가된 요소는 이벤트를 받은 적이 없기 때문에 클릭이 안 먹습니다.

이 문제를 해결하는 방법이 이벤트 위임입니다. “부모(또는 상위 요소)에 이벤트를 걸어두고, 실제 클릭된 대상을 골라서 처리”하는 방식입니다.

7. 예제 (Output 포함): 직접 바인딩 vs 이벤트 위임

📌 예제 코드


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    .wrap { border:1px solid #ddd; padding:12px; border-radius:8px; }
    .item { cursor:pointer; padding:6px; border-bottom:1px solid #eee; }
    .item:hover { background:#f7f7f7; }
  </style>
</head>

<body>

  <div class="wrap">
    <h4>과일 목록</h4>

    <button id="add">항목 추가</button>

    <ul id="list">
      <li class="item">사과</li>
      <li class="item">바나나</li>
    </ul>
  </div>

  <script>
    $(function() {

      // 1) 직접 바인딩(처음 있는 li에만 이벤트가 붙음)
      // $(".item").on("click", function() {
      //   alert("직접 바인딩 클릭: " + $(this).text());
      // });

      // 2) 이벤트 위임(부모인 #list에 이벤트를 걸고, 실제 대상은 ".item"으로 필터링)
      $("#list").on("click", ".item", function() {
        alert("이벤트 위임 클릭: " + $(this).text());
      });

      // 항목 추가 버튼
      var count = 1;
      $("#add").on("click", function() {
        count++;
        $("#list").append('<li class="item">새 항목 ' + count + '</li>');
      });

    });
  </script>

</body>
</html>

📌 OUTPUT

처음에 “사과”, “바나나” 항목이 보입니다.
항목(li)을 클릭하면 alert 창에 클릭한 항목 이름이 표시됩니다.
“항목 추가” 버튼을 누르면 새 항목이 계속 아래에 추가됩니다.
추가된 새 항목도 클릭하면 alert가 정상적으로 뜹니다. (이벤트 위임 덕분)

만약 위 코드에서 이벤트 위임 부분을 지우고, 직접 바인딩 코드만 켜면 처음에 있던 항목은 클릭되지만, 나중에 추가된 항목은 클릭이 안 되는 현상을 볼 수 있습니다.

8. 이벤트 위임을 “어디에” 걸어야 좋을까?

이벤트 위임은 보통 다음처럼 씁니다.


$("#부모").on("이벤트", "자식선택자", function() {
  // 실행
});

여기서 중요한 팁:

가능하면 document까지 올리지 말고, 가까운 부모 요소에 걸어주세요. (범위를 좁히면 관리가 쉽고 실수도 줄어듦)
부모는 “항상 존재하는 요소”여야 합니다. (그래야 위임이 성립)

9. 자주 하는 실수 TOP 4

동적으로 추가된 요소에 click()만 걸고 왜 안 되지? → 이벤트 위임(on + 두 번째 인자) 필요
this에 jQuery 메서드를 바로 사용 → this는 DOM, $(this)로 감싸기
a 태그 클릭했더니 페이지가 이동 → e.preventDefault()
자식 클릭했는데 부모 이벤트까지 같이 실행 → 버블링, 필요하면 e.stopPropagation()

10. 핵심 정리

이벤트는 “사용자 행동에 반응하는 코드 실행 방식”입니다.
on()은 대부분의 이벤트를 통일된 문법으로 처리할 수 있어 많이 씁니다.
이벤트 함수 안의 this는 이벤트가 발생한 요소이며, jQuery 기능은 $(this)로 사용합니다.
preventDefault()는 기본 동작(링크 이동/폼 제출 등)을 막습니다.
버블링 때문에 자식 이벤트가 부모로 전달될 수 있습니다.
이벤트 위임을 쓰면 “나중에 추가된 요소”도 클릭/이벤트가 정상 동작합니다.

다음 편에서는 Ajax (비동기 통신)으로 넘어가서 $.ajax / GET / POST / JSON을 깊게 정리해보겠습니다.

'Computer Science > JQuery' 카테고리의 다른 글

[jQuery] 05. Ajax(비동기 통신) 완전 정리 (GET / POST / JSON / $.ajax) (0)	2026.03.03
[jQuery] 03. DOM 조작 완전 정리 (text / html / val / attr / prop) (0)	2026.03.02
[jQuery] 02. 선택자(Selector) 완전 정리 (0)	2026.02.25
[jQuery] 01. jQuery가 뭐예요? (0)	2026.02.16