[JavaScript] 이벤트 생명주기 (Event Life Cycle)

자바스크립트 이벤트 생명주기

• 자바스크립트에서 작업할 때 이벤트는 간단한 호버나 클릭과 같이 흔한 현상이다.

• 각 이벤트마다 동작은 문서 객체 모델(DOM)을 통해 전파된다. DOM은 형제, 자식 및 부모 요소를 포함한 트리 구조를 갖고 있다. 이벤트는 트리를 통해 일련의 순서로 전달되며, 그게 이벤트 라이프 사이클이다.

단계

1. capture phase

2. target phase

3. bubble phase

1. capture phase

• 이벤트 캡처링은 이벤트가 전파되기 시작하는 과정이다.
• window에 바인딩된 이벤트가 가장 먼저 실행됩니다. document, html, body, div, target element 순서로 바인딩이 진행된다.
• 이벤트 캡처링은 target element에서 끝나며 하위로 전파되지 않는다. 이벤트를 캡처링 단계에서 수신하려면 addEventListener 메서드의 useCapture 속성을 사용할 수 있다.

2. target phase

1. 브라우저는 이벤트 핸들러를 찾기 시작.
2. 사용자가 대상에 addEventListener를 등록했다면 호출.
3. target element의 bubble 속성을 살펴본다.
4. 만약 bubble 속성이 true라면, 대상 요소의 직계 부모가 이벤트를 받게 된다.

3. bubble phase

• 버블링은 캡처링의 정반대. 이벤트의 상향 흐름은 문서나 심지어 창까지 도달할 수 있다.

1. 브라우저는 대상의 직계 부모에게 이벤트 핸들러가 있는지 확인한다.
2. 만약 직계 부모에 이벤트 핸들러가 있다면, 해당 리스너가 실행된다. 그런 다음 이벤트는 부모 요소의 조상으로 흐름.
3. 직계 부모에 이벤트 핸들러가 없다면, 이벤트는 부모 요소의 조상으로 흐르며 등록된 이벤트 핸들러가 있는지 확인한다.
4. 2단계와 3단계는 root element(window, document)에 도달할 때까지 계속된다.