이벤트 흐름

브라우저 이벤트 흐름

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

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

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

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

3. 캡처링 단계

• 페인트 기록을 통해 좌표를 알아낸 브라우저는 해당 좌표에 위치한 요소의 이벤트 리스너를 실행하는 단계

  1) 타겟 요소의 가장 최상위 window 객체로부터 캡처링 단계의 이벤트 리스너가 등록이 되어 있는지 확인하고, 있다면 실행한다.
  2) 그리고 계속 자식 요소로 전파되며 만나는 캡처링 이벤트 리스너를 실행하고 결국 타겟요소까지 이동

window				// 캡처링 이벤트가 있다면 실행!
↓
html, body ...		// 캡처링 이벤트가 있다면 실행!
↓
Target (button) 	// 캡처링 이벤트가 있다면 실행!

4. 버블링 단계
   1) 캡처링이 끝나고, 최초에 이벤트가 발생했던 요소에 버블링 이벤트 리스너가 있다면 실행
   2) 그리고 다음 직계 부모 요소에 버블링 이벤트 리스너가 있다면 실행시키면서 가장 최상위 window 객체까지 계속 전파

window				// 버블링 이벤트가 있다면 실행!
↑
html, body ...		// 버블링 이벤트가 있다면 실행!
↑
Target (button) 	// 버블링 이벤트가 있다면 실행!

코드 예시

// documentElement : html 요소
<script>
  /*캡쳐링 단계*/
  window.addEventListener('click', () => {
    console.log(1);
  }, true) // useCapture boolean 값

  document.addEventListener('click', () => {
    console.log(2);
  }, true)

  document.documentElement.addEventListener('click', () => {
    console.log(3);
  }, true)

  document.body.addEventListener('click', () => {
    console.log(4);
  }, true)

  document.querySelector("button").addEventListener('click', () => {
    console.log(5);
  }, true)

  /*버블링 단계*/

  document.querySelector("button").addEventListener('click', () => {
    console.log(6);
  })

  document.body.addEventListener('click', () => {
    console.log(7);
  })

  document.documentElement.addEventListener('click', () => {
    console.log(8);
  })

  document.addEventListener('click', () => {
    console.log(9);
  })

  window.addEventListener('click', () => {
    console.log(10);
  })
</script>

정리

1. 브라우저에 이벤트가 발생
2. 이벤트 좌표를 페인트 기록을 통해 찾게 됨
3. 윈도우 객체부터 타겟 요소까지 점진적으로 하위 요소로 이동해가면서 캡처링 이벤트를 실행
4. 타겟 요소에서 최상위 요소인 window 객체까지 버블링 이벤트를 실행하는 버블링 단계