JavaScript 이벤트 버블링 쉽게 이해하기

JavaScript 이벤트 버블링에서 먼저 볼 부분

이벤트 버블링은 안쪽 요소에서 발생한 이벤트가 바깥 부모 요소로 차례로 전달되는 동작입니다. 이벤트 위임과 클릭 오류를 이해하는 핵심입니다.

HTML 요소는 서로 안에 들어갈 수 있습니다. 버튼이 카드 안에 있다면 버튼을 클릭한 행동은 버튼에서 시작해 카드, 더 바깥 영역으로 전달될 수 있습니다. 이 흐름을 이벤트 버블링이라고 부릅니다.

버블링은 불편하기만 한 기능이 아닙니다. 목록의 각 버튼에 이벤트를 따로 붙이지 않고, 부모 요소 하나에서 자식 클릭을 처리하는 이벤트 위임에도 사용됩니다.

문제가 되는 경우도 있습니다. 카드 전체 클릭으로 상세 페이지를 열고, 안쪽 삭제 버튼은 삭제만 해야 하는데 두 동작이 함께 실행될 수 있습니다.

이때 stopPropagation으로 전달을 멈출 수 있지만, 무조건 쓰기보다 이벤트 구조를 먼저 확인하는 것이 좋습니다. 어떤 요소에 어떤 클릭 이벤트가 붙어 있는지 정리하면 원인이 보입니다.

부모와 자식 클릭 이벤트

document.querySelector(".card").addEventListener("click", () => {
  console.log("카드 클릭");
});

document.querySelector(".card button").addEventListener("click", (event) => {
  event.stopPropagation();
  console.log("버튼 클릭");
});

이 예제는 그대로 복사해서 확인하는 것보다 한 줄씩 바꿔보는 쪽이 더 도움이 됩니다. 태그 이름, 선택자, 변수 이름, 함수 실행 위치를 조금씩 바꾸면 어떤 부분이 결과에 영향을 주는지 직접 확인할 수 있습니다.

잘못 작성했을 때 나타나는 흐름

JavaScript 글은 값이 언제 만들어지고 함수가 언제 실행되는지를 순서대로 따라가면 이해가 쉬워집니다.

console.log는 단순 확인용이 아니라 현재 값의 모양과 실행 흐름을 확인하는 가장 기본적인 디버깅 도구입니다.

DOM을 다루는 코드는 HTML 요소가 먼저 준비되었는지 확인해야 하며, 선택 결과가 null인지 보는 습관이 중요합니다.

브라우저에서 직접 확인하는 순서

먼저 화면에 나타나는 결과를 보고, 그다음 코드에서 방금 수정한 부분을 확인하세요. 결과가 예상과 다르다면 콘솔 오류, 파일 경로, 선택자 이름, 태그 닫힘, 실행 순서 중 하나가 흔한 원인입니다.

초보 단계에서는 정답 코드를 한 번에 외우기보다 실패한 코드와 수정한 코드를 나란히 비교하는 방식이 좋습니다. 이 글의 예제를 기준으로 작은 값을 바꿔보면 다음 글을 읽을 때도 기준이 더 선명해집니다.

실습 후 점검할 항목

• 클릭한 요소와 부모 요소에 모두 이벤트가 있는지 확인하기
• console.log로 실행 순서 확인하기
• 필요한 경우 stopPropagation 사용하기
• 이벤트 위임이 더 적절한 구조인지 검토하기