이벤트 버블링, 캡쳐링, 위임

🥨 이벤트 버블링

• 자식요소에서 부모요소로 이벤트가 전파되는 것
• 하나의 요소가 이벤트가 발생되게 되면, 이 요소에 할당된 이벤트 핸들러가 동작이 되고, 뒤이어 같은 타입의 이벤트에 한해 부모요소도 동작이 됨.
• 최상단의 윈도우를 만나기 전까지 이 동작이 반복. 부모요소들까지 동작이 되는 현상이 벌어짐. 이런 현상이 있어도 target 프로퍼티는 최초로 발생된 시작점을 담고 있음
• 이벤트 핸들러가 동작된 요소에 접근하고 싶을 때, e.currentRarget
• 버블링을 멈출 때. e.stopPropagation();을 통해 버블링을 막을 수 있음. 버블링을 막을 일이 많지는 않으나 알아두는 것이 좋음

 

🥨 캡쳐링

이벤트 흐름의 3가지 단계

1. 캡처링 단계: 이벤트가 하위 요소로 전파되는 단계
   1. 이벤트가 발생하면 가장 먼저, 그리고 버블링의 반대 방향으로 진행되는 이벤트 전파 방식
   2. 캡쳐링 단계에서 이벤트 핸들러를 동작시키려면, addEventListener에 세번째 프로퍼티에 true 또는 { capture:true }를 전달
   3. 자주 사용되지는 않음
2. 타깃 단계: 이벤트가 실제 타깃 요소에 전달되는 단계
   1. 가장 처음 이벤트 핸들러가 동작하게 되는 순간
3. 버블링 단계: 이벤트가 상위 요소로 전파되는 단계
   1. 이후 다시 window 객체로 이벤트가 전파

🥨 이벤트 위임

• 새로운 자식요소를 추가, 삭제해도 이벤트 제어를 자식요소에 신경쓰지 않아도 되어 유연한 코드 작성 가능
• 여러개의 이벤트를 생성하지 않아도 돼서 코드를 줄일 수 있고, 코드 동작에도 성능에도 영향을 미치기 때문에 고려해서 등록하는 것이 좋음
• 자식 요소 중 버블링을 막는 이벤트가 추가될 경우 제대로 동작할 수 없어 버블링을 막는건 되도록 지향해야 한다.
• 자식요소에서 발생한 이벤트를 부모이벤트에 등록한 이벤트 핸들러가 동작됨