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

자바스크립트에서 버블링과 캡처링 개념은 초보 개발자들 이벤트를 이해하는데 어려움을 겪는 주요 원인입니다. 이 글에서는 자바스크립트의 버블링과 캡처링의 개념을 소개하고 추가적으로 이벤트 위임에 대해서 설명 드리겠습니다.

 

버블링 & 캡처링

 

이벤트 버블링과 캡처링

 

1. 버블링

2. 캡처링

3. 이벤트 위임

추천글

 

버블링

버블링의 원리는 간단합니다. 이벤트가 발생한 요소부터 점점 상위 요소로 거슬러 올라가 window까지 이벤트를 전파하는 것입니다. 거품(Bubble)이 물 아래에서부터 위로 올라가는 것 같다고 해서  버블링이라는 이름이 붙었다고 합니다.

 

See the Pen Untitled by sumin (@hp2580) on CodePen.

 

위의 예제의 초록 영역(depth3)를 클릭해 보세요. 하나의 영역을 클릭했는데 모든 상위 영역(depth2, depth1)의 이벤트가 순차적으로 동작합니다. 중첩된 요소에 이벤트가 발생하면 위처럼 이벤트 전파(Event Propagation)가 발생합니다.

 

event.stopPropagation()

자바스크립트는 이벤트의 버블링을 중단하도록 명령할 수 있습니다.  stopPropagation이라는 메소드를 사용하면 됩니다.

예제를 통해 버블링이 중단되는지 확인해보세요.

 

See the Pen Untitled by sumin (@hp2580) on CodePen.

 

 

꼭 필요한 경우를 제외하고 버블링을 막지 마세요.

stopPropagation은 추후 문제가 될 상황을 만들 수 있습니다.

예시로 사용자가 window 내에서 클릭한 영역의 좌표를 알고 싶은 경우, stopPropagation으로 버블링을 막은 영역은  죽은 영역(dead zone)이 되어 이벤트가 동작하지 않습니다. 아래 예제를 통해 확인해보세요.

 

See the Pen Untitled by sumin (@hp2580) on CodePen.

 

캡처링

캡처링은 버블링의 반대입니다. 버블링이 이벤트가 발생한 요소부터 window까지 이벤트를 전파했다면, 캡처링은 최상위 요소(window)부터 이벤트가 발생한 요소까지 이벤트를 전파합니다. 캡처링을 설정하려면 이벤트 리스너를 등록할 때 세 번째 인자로 true나 {capture: true}를  써줘야 합니다.

 

예제를 통해 캡처링을 확인해보세요. 요소를 클릭하면 상위 요소의 이벤트부터 이벤트가 발생한 요소까지 이벤트가 발생하는 것을 확인할 수 있습니다.

 

See the Pen Untitled by sumin (@hp2580) on CodePen.

 

이벤트 위임

이벤트 위임은 비슷한 방식으로 여러 요소를 다뤄야 할 때 사용됩니다. 이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있습니다. 캡처링과 버블링을 활용하면 강력한 이벤트 핸들링 패턴인 이벤트 위임(event delegation) 을 구현할 수 있습니다.

 

아래 예제를 통해 이벤트 위임을 확인해보세요.

 

See the Pen Untitled by sumin (@hp2580) on CodePen.

 

위 예제에서 item들을 감싸고 있는 box 영역에 이벤트를 할당했지만 이벤트 핸들러가 event.target을 통해 이벤트가 발생한 요소를 감지하고 해당 요소에 이벤트를 할당한 것을 확인할 수 있습니다.

 

item이라는 클래스를 갖는 요소에만 이벤트를 할당하고 싶다면 이벤트 위임을 아래처럼 사용할 수 있습니다.

 

See the Pen Untitled by sumin (@hp2580) on CodePen.

 

이벤트 위임은 이벤트 버블링을 이용해 상위 요소에 이벤트 핸들러를 등록하고 동적으로 생성된 하위 요소에도 이벤트를 쉽게 적용할 수 있습니다. 많은 요소에 각각 이벤트 리스너를 등록하는 대신 상위 요소에 한 번만 등록해도 하위 요소에 모두 적용될 수 있어 성능을 향상시킬 수 있습니다.

 

 

결론

 

• 캡처링: 상위에서 하위로 이벤트가 전파됨.
• 버블링: 하위에서 상위로 이벤트가 전파됨.
• stopPropagation(): 이벤트 전파를 막음.
• 이벤트 위임: 상위 요소에 이벤트 핸들러를 등록해, 하위 요소에서 발생하는 이벤트 처리.

 

 

 

추천글

2024.09.11 - [개발 공부 일지/JavaScript] - [JS] 키보드 이벤트

[JS] 키보드 이벤트

2024.09.11 - [개발 공부 일지/JavaScript] - [JS] 마우스 이벤트

[JS] 마우스 이벤트