PricingLoginStart free
jQuery Academy · 강의

견고한 이벤트 위임 구현

.on()을 사용한 이벤트 위임의 원리와 장점을 배우고, 하나의 리스너로 여러 요소와 이후에 추가될 요소의 이벤트를 처리해 성능을 개선합니다.

레슨 1/311개 단계

견고한 이벤트 위임 구현은(는) CoddyKit의 무료 jQuery Academy 강의입니다. 이것은 3개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 jQuery Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

이벤트 위임이란 무엇인가요?

이벤트 위임에 오신 것을 환영합니다! 이 강력한 기법을 사용하면 웹 애플리케이션의 이벤트를 효율적으로 관리할 수 있습니다.

개별 요소에 많은 이벤트 리스너를 연결하는 대신 공통 부모 요소 하나에 단일 리스너를 연결합니다. 특정 동작을 하는 모든 '자식 요소'를 한 명의 '감독자'가 지켜보는 것과 같습니다.

직접 연결의 한계

.on()이나 다른 메서드를 사용하여 요소에 이벤트를 직접 연결하면, 이벤트 리스너는 그 시점에 존재하는 요소에만 연결됩니다. 이후 DOM에 추가된 새 요소에는 이벤트 처리기가 자동으로 연결되지 않습니다.

예제에서 처음 표시된 버튼을 클릭해 보세요. 그런 다음 잠시 기다리면 새 버튼이 나타납니다. 새 버튼을 클릭해 보세요. 반응하지 않을 것입니다.

$(document).ready(function() {
  // Assume basic HTML structure like:
  // <div id="my-list">
  //   <button class="item">Button 1</button>
  //   <button class="item">Button 2</button>
  // </div>

  // Direct binding to existing items
  $('.item').on('click', function() {
    $(this).text('Directly clicked!');
  });

  // Simulate adding a new item after initial binding
  setTimeout(function() {
    $('#my-list').append('<button class="item">New Item</button>');
    console.log('A new item was added after 2 seconds.');
    console.log('Try clicking the new item - it wont respond!');
  }, 2000);
});

이벤트 버블링 이해하기

위임을 이해하려면 이벤트 버블링을 알아야 합니다. 클릭과 같은 이벤트가 요소에서 발생하면 먼저 해당 요소에서 실행된 다음 부모 요소, 부모의 부모 요소 순서로 document까지 위로 전달됩니다.

event.target 속성은 이벤트를 발생시킨 원래 요소를 항상 가리킵니다. 어떤 부모 요소가 이벤트를 포착하는지는 관계없습니다. 아래 요소를 클릭하고 콘솔 출력을 확인해 보세요.

$(document).ready(function() {
  // Assume HTML like:
  // <div id="outer">
  //   <div id="middle">
  //     <button id="inner">Click Me</button>
  //   </div>
  // </div>

  $('#outer').on('click', function(event) {
    console.log('Outer div caught event. Target:', event.target.id || event.target.tagName);
  });

  $('#middle').on('click', function(event) {
    console.log('Middle div caught event. Target:', event.target.id || event.target.tagName);
  });

  $('#inner').on('click', function(event) {
    console.log('Inner button caught event. Target:', event.target.id || event.target.tagName);
  });
});

위임에 사용하는 jQuery의 .on()

jQuery의 .on() 메서드는 추가 selector 인수를 제공하여 이벤트 위임에 사용할 수 있습니다. 구문은 다음과 같습니다.

  • $(parentSelector).on(event, childSelector, handler);

이때 이벤트 리스너는 parentSelector에 연결됩니다. 그러나 handler 함수는 이벤트가 childSelector와 일치하는 하위 요소에서 시작된 경우에만 실행됩니다.

이벤트 위임 예제

이제 이벤트 위임을 적용하여 장면 2의 문제를 해결해 보겠습니다. 부모 컨테이너(#my-list)에 리스너를 연결하되, 클릭이 .item과 일치하는 요소에서 발생한 경우에만 반응하도록 지정합니다.

이제 새 버튼이 나타나면 클릭에 반응한다는 점을 확인해 보세요.

$(document).ready(function() {
  // Assume HTML structure like:
  // <div id="my-list">
  //   <button class="item">Button 1</button>
  //   <button class="item">Button 2</button>
  // </div>

  // Event delegation: listener on the parent (#my-list)
  // It listens for clicks on any descendant matching '.item'
  $('#my-list').on('click', '.item', function() {
    $(this).text('Delegated click!');
  });

  // Simulate adding a new item after delegation setup
  setTimeout(function() {
    $('#my-list').append('<button class="item">New Delegated Item</button>');
    console.log('A new item was added after 2 seconds.');
    console.log('Try clicking the new item - it WILL respond!');
  }, 2000);
});

동적 요소 처리

앞선 예제에서 확인한 핵심 이점은 이벤트 위임이 동적으로 추가된 요소를 자연스럽게 처리한다는 점입니다.

리스너가 정적인 부모 요소에 있으므로 childSelector와 일치하는 새 자식 요소는 모두 해당 단일 리스너의 적용을 자동으로 받습니다. 콘텐츠를 추가할 때마다 이벤트를 다시 연결할 필요가 없습니다.

성능 향상

동적 콘텐츠를 처리하는 것 외에도 이벤트 위임은 상당한 성능상의 이점을 제공합니다.

  • 리스너 감소: 수백 개 요소에 각각 이벤트 리스너를 연결하는 대신 공통 부모 요소에 하나만 연결합니다.
  • 메모리 절약: 리스너가 적을수록 애플리케이션이 사용하는 메모리도 줄어듭니다.
  • 빠른 시작: 페이지가 로드될 때 브라우저가 이벤트 처리기를 설정하는 데 걸리는 시간이 줄어듭니다.

이벤트를 위임해야 하는 경우

이벤트 위임은 강력한 도구이지만 항상 필요한 것은 아닙니다. 다음은 이벤트 위임을 사용하기에 적합한 상황입니다.

  • 유사한 요소가 많은 경우(예: 긴 목록의 항목이나 표의 행).
  • 초기 페이지 로드 후 DOM에 요소가 동적으로 추가되거나 제거되는 경우.
  • 이벤트 처리에서 성능이 가장 중요한 경우.

위임 모범 사례

이벤트 위임을 최대한 활용하려면 다음 모범 사례를 따르세요.

  • 가장 가까운 정적 부모 요소 선택: 페이지가 로드될 때 반드시 존재하는 가장 가까운 조상 요소에 위임하세요. 더 가까운 부모 요소를 사용할 수 있다면 document나 body에 위임하지 마세요.
  • $(this) 이해하기: 위임된 처리기 내부에서 $(this)는 리스너가 연결된 부모 요소가 아니라 childSelector와 일치한 원래 요소를 가리킵니다.
  • 버블링에 주의하기: 버블링은 위임에 유용하지만 적절히 관리하지 않으면 의도하지 않은 부작용이 발생할 수 있습니다(예: 다른 수업에서 다룰 event.stopPropagation() 사용).

지식 테스트

다음 중 이벤트 위임을 사용하기에 가장 적합한 상황은 무엇입니까?

인터랙티브 레슨에서 답해보세요

이벤트 위임 복습

잘하셨습니다! jQuery의 이벤트 위임 핵심 원리를 학습하셨습니다.

childSelector와 함께 .on()을 사용하면 하나의 부모 리스너로 여러 자식 요소의 이벤트를 관리할 수 있으며, 나중에 동적으로 추가된 요소도 관리할 수 있습니다. 이 기법은 성능을 향상하고 코드를 단순화하며, jQuery 애플리케이션에서 동적 콘텐츠를 효율적으로 처리하는 데 매우 중요합니다.

위임을 완전히 익히면 이벤트 처리를 더욱 안정적이고 확장 가능하게 만들 수 있습니다!

무료로 시작

AI 튜터와 함께 JavaScript을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스
22
레슨
48
무료로 학습 시작전체 코스 보기

자주 묻는 질문

“견고한 이벤트 위임 구현” 강의는 무료인가요?

네 — “견고한 이벤트 위임 구현” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 jQuery Academy 강의 전체를 잠금 해제할 수 있습니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

“견고한 이벤트 위임 구현”에서 뭘 배우나요?

.on()을 사용한 이벤트 위임의 원리와 장점을 배우고, 하나의 리스너로 여러 요소와 이후에 추가될 요소의 이벤트를 처리해 성능을 개선합니다. 브라우저에서 직접 실행하는 실습 코드로 jQuery Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

jQuery Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 jQuery Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 1번째 강의입니다.

“견고한 이벤트 위임 구현” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 jQuery Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 jQuery Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 견고한 이벤트 위임 구현
  2. 이벤트 전파 중지
  3. 사용자 정의 이벤트 생성 및 트리거
← jQuery Academy(으)로 돌아가기