이벤트 심화

웹 페이지에서 이벤트 (예: 클릭, 키보드 입력 등)가 발생할 때 이 이벤트는 DOM 트리를 통해 전파되는데, 이때 이벤트는 캡처링과 버블링이라는 두 가지 단계를 거쳐 전파됩니다.

이벤트 캡처링과 버블링은 마치 물방울이 나무의 꼭대기에서 떨어져 나무 밑으로 내려오는 것(캡처링)과, 그 물방울이 땅에 닿아서 다시 위로 튀어 오르는 것(버블링)으로 볼 수 있습니다.

1. 캡처링: 이벤트가 가장 상위(부모) 요소에서 시작해서 실제 이벤트가 발생한 요소까지 내려갑니다. 예를 들어 클릭 이벤트가 발생했을 때, 이벤트는 document 객체부터 시작해 이벤트 대상 요소까지 순차적으로 전달됩니다.

2. 버블링: 실제 이벤트가 발생한 요소에서 시작해서 가장 상위(부모) 요소까지 올라갑니다. 예를 들어 버튼을 클릭했을 때, 이 버튼이 속한 폼, 섹션, 페이지의 본문 등 상위 요소로 이벤트가 순차적으로 전달됩니다.

1. stopPropagation: 현재의 이벤트가 더 이상 전파되지 않도록 중단

   • 예시: 아래 코드는 클릭 이벤트가 상위 요소로 전파되는 것을 막습니다.
   이벤트 전파 중지

   Copy
   element.addEventListener('click', function (event) {
     event.stopPropagation();
   });

2. preventDefault: 브라우저의 기본 동작 차단 (링크 클릭, 폼 제출 등)

   • 예시: 아래 코드는 링크 클릭하면 해당 URL로 이동하는 브라우저의 기본 동작을 방지합니다.
   a 태그 기본 동작 차단

   Copy
   document.querySelector('a').addEventListener('click', function (event) {
     event.preventDefault();
     console.log("Link was clicked, but we're not navigating anywhere!");
   });