[KUIT] 이벤트 캡처링과 버블링

이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다.

---

HTML 문서의 각 엘리먼트들은 계층적으로 이루어져 있습니다.

→ 이런 계층적 구조 특징 때문에 HTML 요소에 이벤트가 발생하면 연쇄적 이벤트 흐름이 일어나게 됩니다!

 

이런 이벤트 전파(Event Propagation)은 크게 버블링과 캡처링으로 나뉩니다.

 

버블링: 자식 요소에서 발생한 이벤트가 바깥 부모 요소로 전파(기본값)

캡처링: 자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 안쪽 자식 요소까지 도달

 

즉, 버블링은 자식→ 부모, 캡처링은 부모→ 자식으로 방향이 정반대인 것을 알수 있습니다.

 

---

이벤트 전파 흐름은 3가지 단계가 있습니다.

1. 캡처링 단계: 이벤트가 하위 요소로 전파되는 단계
2. 타깃 단계: 이벤트가 실제 타깃 요소에 전달되는 단계
3. 버블링 단계: 이벤트가 상위 요소로 전파되는 단계

이벤트 전파 덕분에 우리는 각각의 요소마다 이벤트를 등록하지 않고, 부모 요소에만 이벤트를 등록하고 이벤트를 전파 할 수 있습니다.

→ 이런 기법을 이벤트 위임이라고 부릅니다.

 

---

브라우저의 이벤트는 기본적으로 버블링 방식으로 이벤트가 전파됩니다.

→ 캡처링으로 설정하기 위해선 별도의 옵션을 함수에 주어야합니다.

 

---

하지만 저희는 이벤트 전파를 제어해야 될 때도 있습니다.

예를 들면 자식 요소에만 이벤트를 발생하고 싶을 때가 있습니다.

 

 

이벤트 전파 방지 방법에는

1. e.stopPropagation()
2. e.stopImmediatePropagation() → 이벤트 전파 + 형제 이벤트 실행 중지
3. e.target → 세심한 이벤트 핸들러 컨트롤
4. e.preventDefault() → 기본 이벤트 동작 자체 취소(링크 기능, submit 이벤트 취소 등 유용하게 쓰임)

---

출처 : https://inpa.tistory.com/entry/JS-📚-버블링-캡쳐링

🌐 한눈에 이해하는 이벤트 흐름 제어 (버블링 & 캡처링)

 

자세한 내용을 확인하고 싶으시면 위 링크를 클릭해주세요! 이벤트 흐름 제어에 대해 쓰여진 글입니다.)

벌써 월요일이 끝나가네요. 편안한 밤 되시고 남은 일주일도 같이 파이팅해요!