JS/JS 핵심 개념
JS 이벤트 흐름
by spare8433
2023. 3. 14.
이벤트 흐름
예시
1. 브라우저 화면에서 이벤트가 발생
2. 이벤트가 발생했을 때 브라우저가 제일 먼저 하는 일은 이벤트 대상을 찾아냄
- 이벤트가 발생한 좌표에 무엇이 있는지 확인하기 위해 렌더링 과정중의 하나인 페인트 기록을 찾아봅니다.
3. 캡처링 단계
- 최상위 window 객체부터 타겟요소까지 캡처링 단계 의 이벤트 리스너가 등록이 되어 있는지 확인하고 있다면 이벤트를 실행 후 자식요소로 이동
- 페인트 기록을 통해 좌표를 알아낸 브라우저는 해당 좌표에 위치 한 요소의 이벤트 리스너를 실행
4. 버블링 단계
- 캡처링이 끝나고, 최초에 이벤트가 발생했던 타겟요소부터 window 객체까지 버블링 이벤트 리스너가 있다면 실행 후 다음 직계 부모 요소로 이동
참고
https://www.inflearn.com/course/%EC%BD%94%EB%94%A9%EC%9D%B8%ED%84%B0%EB%B7%B0-js-%EC%96%91%EC%84%B1%ED%95%99%EA%B5%90
