[JavaScript] 이벤트의 흐름 알아보기

1. 이벤트 캡쳐링(event capturing)

• 브라우저 화면에서 이벤트가 발생했을때 브라우저는 이벤트 대상을 찾아간다. 이때 상위의 window 객체부터 document, body 순으로 DOM 트리를 따라 내려가며 중간에 만나는 이벤트 리스너를 실행시키는데, 이 단계를 이벤트 캡쳐링이라고 한다.

2. 이벤트 버블링(event bubbling)

• 이벤트 대상을 찾고 캡처링이 끝나면 이제 다시 DOM 트리를 따라 올라가며 만나는 모든 버블링 이벤트 리스너를 실행하는 단계이다.
• 기본적으로 이벤트 리스너의 3번째 인자는 false가 기본이며, false이거나 인자가 없이 기본 이벤트 리스너 함수가 있다면 캡쳐링 단계를 거치지 않고 버블링 단계에 실행한다.

3. 이벤트 위임(event delegation)

• 여러 개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 DOM 요소에 이벤트 핸들러를 등록하는 방법
• 반복되어지는 공통된 무언가를 처리할 때 일일이 자식요소에 이벤트를 추가하는 것 보다, 부모에 등록하는 것이 좋다
• 이벤트 위임의 장점
  - 동적인 엘리먼트에 대한 이벤트 처리가 수월하다.
  - 이벤트 핸들러 관리가 쉽다.
  - 메모리 사용량이 줄어든다.
  - 메모리 누수 가능성이 줄어든다.