Guidelines
Practice
이벤트 심화
웹 페이지에서 이벤트 (예: 클릭, 키보드 입력 등)가 발생할 때 이 이벤트는 DOM 트리를 통해 전파되는데, 이때 이벤트는 캡처링과 버블링이라는 두 가지 단계를 거쳐 전파됩니다.
이벤트 버블링과 캡처링
이벤트 캡처링과 버블링은 마치 물방울이 나무의 꼭대기에서 떨어져 나무 밑으로 내려오는 것(캡처링)과, 그 물방울이 땅에 닿아서 다시 위로 튀어 오르는 것(버블링)으로 볼 수 있습니다.
1. 캡처링: 이벤트가 가장 상위(부모) 요소에서 시작해서 실제 이벤트가 발생한 요소까지 내려갑니다. 예를 들어 클릭 이벤트가 발생했을 때, 이벤트는 document 객체부터 시작해 이벤트 대상 요소까지 순차적으로 전달됩니다.
2. 버블링: 실제 이벤트가 발생한 요소에서 시작해서 가장 상위(부모) 요소까지 올라갑니다. 예를 들어 버튼을 클릭했을 때, 이 버튼이 속한 폼, 섹션, 페이지의 본문 등 상위 요소로 이벤트가 순차적으로 전달됩니다.
이벤트 전파 중지하기
stopPropagation 및 preventDefault 메서드
-
stopPropagation
: 현재의 이벤트가 더 이상 전파되지 않도록 중단- 예시: 아래 코드는 클릭 이벤트가 상위 요소로 전파되는 것을 막습니다.
이벤트 전파 중지element.addEventListener('click', function (event) { event.stopPropagation(); });
-
preventDefault
: 브라우저의 기본 동작 차단 (링크 클릭, 폼 제출 등)- 예시: 아래 코드는 링크 클릭하면 해당 URL로 이동하는 브라우저의 기본 동작을 방지합니다.
a 태그 기본 동작 차단document.querySelector('a').addEventListener('click', function (event) { event.preventDefault(); console.log("Link was clicked, but we're not navigating anywhere!"); });
Guidelines
AI Tutor
Publish
Design
Upload
Notes
Favorites
Help