1. 이벤트 캡처링 & 이벤트 버블링

브라우저의 이벤트 과정

캡처링 → 타겟팅 → 버블링

1-1. 이벤트 캡처링

상위 요소에서 발생한 이벤트가 하위 요소로 전파되는 것

html → body → … → 이벤트가 발생한 태그

1-2. 이벤트 버블링

하위 요소에서 발생한 이벤트가 상위 요소로 전파되는 것

이벤트가 발생한 태그 → 부모 태그 → … → html

• 현대의 브라우저에서 기본적으로 모든 이벤트 핸들러(or 이벤트 리스너)들은 버블링 단계에서 실행됩니다.

• 만약 addEventListener의 세번째 인자를 true로 하면 캡처링 단계에서 이벤트 리스너가 실행됩니다.

  $element.addEventListener('focus',()=>{},true)
  $element.addEventListener('focus',()=>{},{capture:true})
  

• focus, blur, mouseenter, mouseleave 같은 이벤트는 버블링이 일어나지 않기 때문에 캡처링을 이용할 수 있습니다.

2. 이벤트 위임

2-1. 이벤트 위임이란?

이벤트 버블링을 이용해 개별 요소에 이벤트 리스너(혹은 이벤트 핸들러)를 생성하는 대신 상위 요소에서 이벤트 리스너를 생성하는 것

2-2. bad code

Todo App 과제에서 아이템에 체크 및 삭제 이벤트를 등록하는 코드

item template

getItemTemplate(item) {
  if (isInvalidItem(item)) return '';
  const { id, content, completed } = item;
  return `
    <li data-id=${id} class='todo-item'>
      <div class ='contents'>
        <input 
          class='${CHECKBOX_SELECTOR}'
          type='checkbox'
          id =${id} 
          ${completed ? 'checked' : ''}>
        <label for=${id} class='content ${completed ? 'complete' : ''}'>
          ${content}
        </label>
      </div>
      <button class='${DELETE_BUTTON_SELECTOR}'>
        <i class="fa-solid fa-trash"></i>
      </button>
    </li>`;
}