이벤트의 3단계 흐름(flow)
이벤트 캡처링을 더 자세히 보기 위해서 이벤트의 3단계 흐름을 살펴보겠습니다.
1. 캡쳐링 단계 - 이벤트가 하위 요소로 전파되는 단계
2. 타깃 단계 - 이벤트가 실제 타깃 요소에 전달되는 단계
3. 버블링 단계 - 이벤트가 상위 요소로 전파되는 단계
Event Bubbling
이벤트 버블링이란 가장 깊게 중첩된 요소 (3)에 이벤트가 발생했을 때 이벤트가 위로(bubble up) 전달되는 것을 의미합니다.
그래서 3번 요소, 2번 요소, 1번 요소에 그 이벤트에 대한 핸들러가 있다면 3번 요소에 핸들러가 실행되고 2번 요소에 핸들러 1번 요소에 핸들러 순으로 실행됩니다.
event.target vs event.currentTarget
1. event.target - 실제 이벤트가 시작된 '타깃'요소입니다.
2. this(event.currentTarget) - 핸들러가 할당된 요소.
Event Capturing
이벤트 캡처링이란 이벤트 버블링과 다르게 제일 상단에 있는 요소에서 아래로 이벤트가 내려오는 것을 말합니다.
이벤트 캡처링의 흐름 살펴보기
버블링의 흐름을 알기 위해서는 중첩된 요소들에 핸들러를 넣어서 확입했습니다. 그러면 가장 안에 있는 것부터 핸들러가 호출이 되어서 버블링의 흐름을 확인했습니다.
그럼 캡처링의 흐름을 확인하려면 어떻게 해야 할까요? addEventListener의 capture옵션을 true로 설정해야 합니다.(마지막 매개변수)
Event Delegation(이벤트 위임)
앞서 배운 이벤트버블링과 캡처링을 통해서 이벤트 위임을 이해할 수 있습니다.
이 이벤트 위임은 '하위 요소의 이벤트를 상위 요소에 위임하는 것'입니다.
즉, 하위 요소의 이벤트를 상위에서 제어합니다.
