[JavaScript] 이벤트 흐름

이벤트 흐름

1. 브라우저 화면에서 이벤트가 발생합니다.

   이때 브라우저 관점에서의 이벤트란, 마우스 클릭 뿐만 아니라 마우스 휠의 움직임, 마우스 포인터의 이동, 화면을 터치하는 등 모든 종류의 사용자 제스처를 말합니다.

2. 이벤트가 발생했을 때 브라우저가 제일 먼저 하는 일은 이벤트 대상을 찾는 일입니다.

   이벤트가 발생한 좌표에 무엇이 있는지 확인하기 위해 렌더링 과정 중의 하나인 페인트 기록을 찾아봅니다.

1. 캡처링 단계

   페인트 기록을 통해 좌표를 알아낸 브라우저는 해당 좌표에 위치한 요소의 이벤트 리스너를 실행합니다. 이 과정을 캡처링 단계(capturing phases)라고 합니다.

   이벤트 캡처링 단계에서는 이벤트가 최상위 노드(window 객체)에서 시작하여 해당 엘리먼트를 찾을 때까지 하향식으로 전파됩니다. 즉, 최상위 노드에서부터 이벤트가 발생한 엘리먼트까지 타고 내려가는 단계입니다. 이벤트 캡처링 단계에서는 capture 옵션을 true로 설정하여 이벤트 핸들러를 등록할 수 있습니다.

2. 버블링 단계

   이벤트 버블링 단계에서는 캡처링이 끝나고, 최초에 이벤트가 발생했던 요소에 버블링 이벤트 리스너가 있다면 실행합니다. 그리고 이벤트가 발생한 엘리먼트에서 시작하여 이벤트 리스너가 있다면 실행시키며 최상위 노드(window 객체)까지 상향식으로 전파됩니다. 버블링 단계에서는 capture 옵션을 false로 설정하여 이벤트 핸들러를 등록할 수 있습니다.