JavaScript에서 이벤트 전파란 무엇이며 왜 이해해야 할까
웹 페이지에서 사용자의 행동은 대부분 이벤트라는 형태로 처리된다. 버튼 클릭, 마우스 이동, 키보드 입력과 같은 동작은 모두 브라우저가 감지하여 자바스크립트로 전달한다. 그런데 하나의 요소에서 발생한 이벤트가 해당 요소에서만 처리되는 것은 아니다. 실제로는 부모 요소와 자식 요소 사이를 이동하며 순차적으로 처리된다. 이 과정을 이벤트 전파라고 부른다. 이벤트 전파 개념을 이해하지 못하면 의도하지 않은 동작이 발생하거나, 코드가 복잡해질 수 있다. 이 글에서는 자바스크립트 이벤트 전파의 기본 개념부터 동작 방식, 그리고 실제 개발에서 왜 중요한지를 차분하게 정리한다. 1. 이벤트 전파의 기본 개념 이벤트 전파란 하나의 이벤트가 발생했을 때, 해당 이벤트가 여러 HTML 요소를 거쳐 전달되는 과정 을 의미한다. 예를 들어 버튼이 div 안에 들어 있는 구조라면, 버튼을 클릭했을 때 이벤트는 버튼에서 끝나지 않는다. 부모 요소와 상위 요소에도 영향을 미칠 수 있다. 이러한 동작 방식은 브라우저의 기본 설계에 포함된 개념이다. 2. HTML 구조와 이벤트의 관계 다음과 같은 구조를 생각해볼 수 있다. < div id = "container" > < button id = "btn" >클릭 </ button > </ div > 이 구조에서 버튼을 클릭하면 버튼 요소 div 요소 document 객체 순서로 이벤트가 전달된다. 이 흐름을 이해하는 것이 이벤트 전파의 출발점이다. 3. 이벤트 전파의 세 가지 단계 자바스크립트에서 이벤트는 다음 세 단계 를 거쳐 처리된다. 캡처링 단계 타깃 단계 버블링 단계 이 세 단계는 항상 같은 순서로 진행된다. 4. 캡처링 단계란 무엇인가 캡처링 단계는 이벤트가 가장 바깥 요소에서 시작해 , 이벤트가 발생한 실제 요소로 내려오는 과정 이다. 이 단계에서는 docum...