이벤트 처리 (addEventListener & 이벤트 위임)

addEventListener만 사용

HTML에는 onclick 같은 인라인 이벤트 속성이 없고, 모든 이벤트는 main.js의 bindEvents() 함수 안에서 addEventListener로 연결됩니다.

	onclick	addEventListener
같은 이벤트에 여러 개 등록	하나만 가능, 나중 코드가 덮어씀	여러 핸들러를 안전하게 추가
구조와 동작 분리	HTML 안에 JS가 섞임	HTML(구조)과 JS(동작) 분리

이벤트 위임

링크나 버튼 하나하나에 리스너를 달지 않고, 부모 요소에 한 번만 달아서 처리하는 방식입니다. 이 프로젝트에서는 두 곳에 쓰였습니다.

// 메뉴 링크 클릭 → 모바일 메뉴 자동 닫기
selectors.menu.addEventListener('click', (event) => {
  if (event.target.matches('a')) {
    setMenuState(false);
  }
});

// 필터 버튼 클릭 → 언어별 필터 적용 (나중에 만들어진 버튼도 자동으로 동작)
selectors.filterGroup.addEventListener('click', (event) => {
  const button = event.target.closest('[data-filter]');
  if (button) {
    applyProjectFilter(button.dataset.filter);
  }
});

필터 버튼은 API 응답을 받은 뒤 동적으로 만들어지기 때문에, 부모에 리스너를 달아 두면 버튼이 새로 생겨도 따로 연결할 필요가 없습니다.

정리

• 이벤트는 전부 bindEvents() 한 곳에서 addEventListener로 연결
• 반복되는 요소나 나중에 생기는 요소는 부모에서 이벤트 위임으로 처리

출처: Codyssey-B1/B1-1