기술 정리/Javascript

이벤트 버블링과 캡처링: 웹 이벤트 전파 메커니즘

Treejin 2023. 9. 12. 21:28
반응형

이벤트 버블링(Event Bubbling)

이벤트 버블링이란, 이벤트가 DOM(Document Object Model)트리에서 가장 안쪽의 하위 요소부터 시작해서 상위 요소로 전파되는 방식을 말한다.

 

다음과 같은 HTML과 Javascript를 가진 웹 페이지가 있다고 하자.

See the Pen Untitled by NamWoojin (@namwoojin) on CodePen.

위 코드에서 event.stopPropagation()가 없이 코드를 실행시켰다면

버튼이 클릭되었습니다.
이벤트 버블링 순서: child -> parent
부모 요소 클릭

과 같은 형태로 로그가 찍혔을 것이다.

 

하지만 위 코드에서는 event.stopPropagation()으로 이벤트 전파를 중지하였으므로 아래와 같이 부모요소까지 이벤트가 전파되지 않는다.

버튼이 클릭되었습니다.
이벤트 버블링 순서: child -> parent

이와 같이 자식 -> 부모 요소로 이벤트가 전파되는 것을 이벤트 버블링이라고 한다.

 

 

이벤트 캡처링(Event Capturing)

이벤트 캡처링은 이벤트가 DOM 트리에서 가장 높은 상위 요소에서 가장 낮은 하위 요소로 전파되는 방식이다.

See the Pen Event Capturing by NamWoojin (@namwoojin) on CodePen.

addEventListener에 다음과 같이 세번째 파라미터로 캡쳐링을 활성화 한다.

addEventListener(type, listener)
addEventListener(type, listener, options)
addEventListener(type, listener, useCapture)

위의 코드를 실행시키면 다음과 같이 부모 -> 자식 순서로 이벤트가 전달된 결과를 얻을 수 있다.

부모 요소 클릭
버튼이 클릭되었습니다.
이벤트 버블링 순서: child -> parent

위와 같이 부모 -> 자식 순서대로 이벤트가 전파되는 것을 이벤트 캡쳐링이라 한다.

 

 

이벤트 버블링과 이벤트 캡쳐링의 활용

이벤트 버블링과 캡처링은 웹 개발에서 중요한 역할을 한다.

 

이벤트 위임(Event Delegation)

이벤트 위임(Event Delegation)은 부모 요소에 이벤트 리스너를 추가하고, 하위 요소에서 발생한 이벤트를 부모 요소에서 처리하는 패턴이다. 이를 사용하면 동적으로 생성되는 하위 요소에 대한 이벤트 처리를 간편하게 관리할 수 있다.

See the Pen Untitled by NamWoojin (@namwoojin) on CodePen.

위와 같이 구현하면 삭제시의 이벤트를 부모요소인 taskList에서 관리하므로,

새로운 태스크를 추가했을 때 새로 추가한 delete버튼에 이벤트를 각각 붙여줄 필요가 없어진다.

 

 

이벤트 중지 및 방지(Event Stopping and Preventing)

특정 상황에서 이벤트 전파를 중지하거나, 기본 동작을 막는 등의 제어가 가능하다.

아래와 같은 예시에서는 입력된 값이 전부 유효한지에 따라 이벤트 전달 여부를 결정할 수 있다.

See the Pen Untitled by NamWoojin (@namwoojin) on CodePen.

 

실제 활용 사례

  • 이벤트 위임(Event Delegation)
    • 리스트 아이템, 테이블 행, 또는 동적으로 생성되는 요소에 대한 클릭 이벤트를 관리할 때 이벤트 위임은 매우 유용하다.
    • 부모 요소에 클릭 이벤트 리스너를 추가하고, 클릭된 요소를 확인하여 특정 동작을 수행한다.
  • 모달 다이얼로그와 팝업창
    • 모달 다이얼로그나 팝업창을 열고 닫는 동작은 이벤트 버블링과 캡처링을 활용하여 구현할 수 있다.
  • 드래그 앤 드롭(Drag and Drop)
    • 요소를 드래그하고 놓는 동작은 마우스 이벤트의 연속적인 발생에 의존한다.
    • 이때 이벤트 캡처링과 버블링을 통해 드래그 액션의 시작과 끝을 관리하고 요소의 이동을 처리할 수 있다.
  • 폼 유효성 검사(Form Validation)
    • 폼 제출 시 입력값의 유효성을 검사하고 오류 메시지를 표시하는 경우, 이벤트 버블링을 사용하여 각 입력 필드에서 오류 메시지를 표시하거나 숨길 수 있다.
반응형