카테고리 없음

jQuery의 .click() vs .on()

jjhim531 2025. 1. 12. 18:43
반응형

.click()과 .on()은 모두 클릭 이벤트를 처리할 때 사용된다. 하지만 두 메서드는 동작 방식과 유연성에서 차이가 있다.

1. .click()

.click()은 특정 요소에 직접적으로 클릭 이벤트 핸들러를 등록한다.

특징

  • 이미 DOM에 존재하는 요소에만 작동.
  • 이벤트 종류(클릭, 키 입력 등)에 따라 제공되는 간편 메서드 중 하나.
  • 동적으로 추가된 요소에는 적용되지 않음.

예제

<button id="btn">Click Me</button>
<script>
    // #btn 요소에 클릭 이벤트 핸들러 등록
    $("#btn").click(function () {
        alert("Button clicked!");
    });
</script>

동작 방식

  • DOM에 버튼이 존재하는 경우에만 이벤트를 등록합니다.
  • 만약 버튼이 동적으로 추가되었다면 .click()으로는 이벤트를 등록할 수 없습니다.

2. .on()

.on()은 **이벤트 위임(Event Delegation)**을 통해 요소에 이벤트를 등록합니다.

특징

  • 이미 존재하는 요소뿐만 아니라 동적으로 추가된 요소에도 이벤트 핸들러를 적용할 수 있음.
  • 이벤트를 부모 요소에 위임하여 자식 요소에서 발생한 이벤트를 처리.
  • 여러 이벤트를 한 번에 처리 가능.

예제

1) 기존 요소에 이벤트 등록

 
<button id="btn">Click Me</button>
<script>
    // #btn 요소에 클릭 이벤트 핸들러 등록
    $("#btn").on("click", function () {
        alert("Button clicked!");
    });
</script>

2) 동적 요소에 이벤트 등록

<div id="container"></div>
<button id="addBtn">Add Button</button>

<script>
    // 동적으로 추가된 버튼에도 클릭 이벤트 등록
    $("#container").on("click", ".dynamic-btn", function () {
        alert("Dynamic button clicked!");
    });

    // 버튼 동적 추가(.append : 선택한 요소의 내부 끝에 새로운 콘텐츠를 추가)
    $("#addBtn").click(function () {
        $("#container").append('<button class="dynamic-btn">Dynamic Button</button>');
    });
</script>

동작 방식

  1. 기존 요소에 이벤트를 등록하는 경우 .click()과 유사하게 동작합니다.
  2. 동적 요소에 이벤트를 등록하려면, 부모 요소에 이벤트를 위임해야 합니다.
    • 예: 부모 요소 #container는 동적으로 추가된 .dynamic-btn 버튼의 클릭 이벤트를 처리.

.click()와 .on()의 주요 차이점

특징.click().on()

적용 대상 이미 존재하는 요소에만 작동 기존 요소 + 동적으로 추가된 요소 모두 지원
동적 요소 지원 지원하지 않음 지원
유연성 단일 이벤트 핸들러 등록 이벤트 위임, 여러 이벤트 등록 가능
사용 방법 $("#btn").click(fn) $("#container").on("click", ".child", fn)

3. 언제 .on()을 사용해야 할까?

  • 동적 요소 처리:
    • 동적으로 추가되는 요소에 대해 이벤트를 처리해야 하는 경우.
    • 예: AJAX로 추가된 콘텐츠, 유저가 생성한 요소 등.
  • 성능 최적화:
    • 다수의 자식 요소에 개별적으로 이벤트를 등록하지 않고, 부모 요소에 이벤트를 위임해 성능을 개선.

결론

  • .click(): 간단한 경우, 기존 요소에만 이벤트를 등록할 때 사용.
  • .on(): 동적 요소나 복잡한 이벤트 처리, 이벤트 위임이 필요한 경우 사용.

이 차이를 기억하면, 더 적절한 메서드를 선택할 수 있습니다! 😊

728x90
반응형