1. 이벤트 기초

(1) 핵심 개념

1. DOM 이벤트 모델:
   • 웹 페이지에서 발생하는 다양한 상호작용을 감지하고 처리하는 메커니즘
   • addEventListener 메서드를 사용하여 이벤트 리스너를 등록
2. 이벤트 전파:

   • 버블링(Bubbling): 이벤트가 가장 하위 요소에서 시작하여 상위로 전파

     <aside> 🕶️

     tip: 비누방울이 아래에서 위로 올라가는 모습을 상상해보세요. 이벤트가 아래에서 위로 전파되는걸 버블링이라고 한답니다!

     </aside>

   • 캡처링(Capturing): 이벤트가 최상위 요소에서 시작하여 하위로 전파

3. 이벤트 객체:
   • 이벤트 발생 시 생성되는 객체로, 이벤트에 대한 상세 정보 포함
   • 주요 속성: type, target, currentTarget, preventDefault(), stopPropagation()

(2) 참고 링크

이벤트 입문 - Web 개발 학습하기 | MDN

브라우저 이벤트 소개

(3) 예제 코드를 통해 알아보기

// DOM 이벤트 모델
document.getElementById('myButton').addEventListener('click', function(event) {
  console.log('Button clicked!');
  console.log('Event type:', event.type);
  console.log('Target element:', event.target);
});

// 이벤트 버블링 예시
document.body.addEventListener('click', function(event) {
  console.log('Body clicked!');
}, false);

// 이벤트 캡처링 예시
document.body.addEventListener('click', function(event) {
  console.log('Body clicked (capture phase)!');
}, true);

// 이벤트 객체의 주요 속성 활용
document.getElementById('myInput').addEventListener('keydown', function(event) {
  console.log('Key pressed:', event.key);
  console.log('Ctrl key pressed:', event.ctrlKey);
  if (event.key === 'Enter') {
    event.preventDefault(); // 기본 동작 방지
  }
});

1. addEventListener를 사용한 이벤트 리스너 등록
2. 이벤트 버블링과 캡처링의 차이 (false와 true 옵션)
3. 이벤트 객체의 다양한 속성 사용 (type, target, key, ctrlKey)
4. preventDefault()를 사용한 기본 동작 방지

2. 이벤트 위임

(1) 핵심 개념

1. 이벤트 위임(Event Delegation):
   • 여러 요소의 이벤트를 관리할 때, 각 요소에 리스너를 추가하는 대신 공통 조상 요소에 하나의 리스너를 추가하는 기법
   • 메모리 사용을 줄이고 성능을 향상시키는 효과적인 방법
2. 동적 요소 처리:
   • 동적으로 생성되는 요소들의 이벤트를 효율적으로 관리할 수 있음
   • 페이지 로드 후 추가되는 요소들에 대해서도 별도의 이벤트 등록 없이 처리 가능
3. 이벤트 타겟 식별:
   • event.target을 사용하여 실제 이벤트가 발생한 요소를 식별
   • 조건문을 통해 특정 요소나 클래스에 대해서만 이벤트 처리 가능

(2) 참고 링크

이벤트 위임

Event bubbling - Learn web development | MDN