이벤트 버블링, 캡쳐링, 위임에 대해 설명해 주세요.

이벤트 버블링, 캡쳐링, 위임에 대해 설명해 주세요.

1. 이벤트

1-1. 이벤트

• 프로그래밍 시스템 내에서 발생하는 사건

1-2. Event 객체

• 발생한 이벤트에 대한 정보를 가지는 객체
• 다양한 파생 객체 존재
  • MouseEvent, KeyboardEvent, FocusEvent, InputEvent, ErrorEvent, CustomEvent 등

1-3. 이벤트 리스너/핸들러

이벤트 리스너

• 특정 대상이 이벤트를 수신하도록 하는 함수
  • DOM 요소, Document, Window 등
• 대상이 이벤트 수신 시 이벤트 핸들러 동작

이벤트 핸들러

• 이벤트 수신 시 호출할 함수
• 매개변수로 해당하는 Event 객체를 받음

1-4. 이벤트 리스너 등록

HTML 이벤트 리스너 속성

• <수신대상 on이벤트="이벤트핸들러" />
• 사용 비권장

JS 이벤트 리스너 속성

• 수신대상.on이벤트 = 이벤트핸들러
• 적은 기능, 높은 호환성

JS 이벤트 리스너 함수

• 수신대상.add/removeEventListener("이벤트", 이벤트핸들러, 옵션)
• 많은 기능(탈부착, 옵션), 상대적으로 낮은 호환성
• 동일 이벤트에 대해 이벤트 리스너 다중 등록 가능

2. 이벤트 전파

• 이벤트는 계층 구조를 거치며 전파됨
• 캡처링과 버블링으로 구분

2-1. 이벤트 캡쳐링

• 이벤트가 조상 객체(Window)에서 타켓 요소까지 전파되는 과정
• 이벤트 리스너는 캡처링 단계에서 이벤트를 수신하지 않음

2-2. 이벤트 버블링

• 이벤트가 타켓 요소에서 조상 객체(Window)까지 전파되는 과정
• 이벤트 리스너는 버블링 단계에서 이벤트를 수신함

3. 이벤트 활용

3-1. 이벤트 기본 행동 방지

• 요소마다 이벤트에 따라 정해진 기본 행동이 존재함
• 기본 행동을 방지하려면, 이벤트 핸들러 내에서 이벤트객체.preventDefault() 실행

3-2. 이벤트 전파 방지

• 이벤트 전파를 막으려면, 이벤트 핸들러 내에서 이벤트객체.stopPropagation() 실행
• 이벤트 리스너가 다중 등록된 상태에서 모든 리스너의 이벤트 전파를 막으려면, 이벤트 핸들러 내에서 이벤트객체.stopImmediatePropagation() 실행

3-3. 이벤트 위임

• 자식 요소의 이벤트를 부모 요소에게 위임하여 다루는 기법
• 이벤트 발생 시 부모 요소의 이벤트 핸들러에서 Event객체.target으로 자식 요소에 접근 가능

4. 이벤트 리스너 옵션

4-1. 이벤트 캡쳐링 동작

• 캡처링 단계에서 이벤트 수신
• 이벤트 리스너 등록 시 옵션 객체에 capture: true 명시
• 또는 이벤트 리스너 등록 시 옵션 매개변수에 논리값을 줄 경우 캡처링 여부로 인식함

4-2. 일회성 이벤트 리스너

• 이벤트 리스너 한 번만 수행 후 제거
• 이벤트 리스너 등록 시 옵션 객체에 once: true 명시

4-3. 이벤트 기본 행동 방지 방지

• preventDefulat() 미호출 명시
• 이벤트 리스너 등록 시 옵션 객체에 passive: true 명시

4-4. 이벤트 리스너 제거

• removeEventListener()가 어려운 상황에서의 이벤트 리스너 제거
• AbortController 객체 생성
• 이벤트 리스너 등록 시 옵션 객체에 signal: AbortSignal객체 명시
• 이후 AbortController객체의 abort() 메소드 호출 시 이벤트 리스너 제거

5. 참고 자료

• MDN 공식문서(이벤트 입문)
• MDN 공식문서(이벤트 객체)
• MDN 공식문서(addEventListener)