JavaScript 이벤트 전파(Event Propagation) 완벽 가이드

MicaelKnife·2024년 8월 9일

목록 보기

4/19

🌟 들어가며: 당신의 클릭은 어디로 갔을까요?

안녕하세요, 열정 넘치는 주니어 개발자 여러분!

여러분은 웹 페이지에서 버튼을 클릭했을 때, 그 클릭 이벤트가 어떻게 처리되는지 궁금해 본 적이 있나요? 아니면 부모 요소에 걸어둔 이벤트 핸들러가 자식 요소를 클릭했을 때도 실행되는 것을 보고 "어? 이게 왜 이러지?"라고 생각해 본 적 있으신가요?

이런 현상들은 모두 이벤트 전파(Event Propagation)라는 흥미로운 개념과 관련이 있습니다. 오늘은 이 이벤트 전파의 세계로 여러분을 초대하고자 합니다. 그리고 그 과정에서 개발자들이 자주 사용하는 stopPropagation()이라는 마법 같은 메서드의 비밀도 함께 파헤쳐보겠습니다!

자, 이제 출발해볼까요? 🚀

이벤트 전파란 무엇인가?

이벤트 전파는 웹 페이지에서 발생한 이벤트가 DOM 트리를 따라 이동하는 방식을 설명하는 메커니즘입니다. 쉽게 말해, 여러분이 버튼을 클릭했을 때 그 클릭 이벤트가 버튼에만 머물지 않고 상위 요소들로 퍼져나가는 현상을 말합니다.

이 개념을 이해하는 것은 웹 개발에서 매우 중요합니다. 왜냐하면 이벤트 전파를 제대로 이해하고 있지 않으면, 의도치 않은 동작이 발생하거나 이벤트 핸들러가 예상과 다르게 작동할 수 있기 때문입니다.

이벤트 전파의 3단계

이벤트 전파는 크게 세 단계로 나눌 수 있습니다:

캡처링 단계 (Capturing Phase): 이벤트가 최상위 요소에서 시작해 타겟 요소로 내려가는 단계
타겟 단계 (Target Phase): 이벤트가 실제 타겟 요소에 도달한 단계
버블링 단계 (Bubbling Phase): 이벤트가 다시 타겟 요소에서 최상위 요소로 올라가는 단계

이 중에서 대부분의 경우 우리가 다루게 되는 것은 버블링 단계입니다.

<div id="outer">
  <div id="inner">
    <button id="button">클릭하세요!</button>
  </div>
</div>

위의 HTML 구조에서 버튼을 클릭하면, 이벤트는 다음과 같은 순서로 전파됩니다:

button (타겟 단계)
#inner (버블링 단계)
#outer (버블링 단계)
document (버블링 단계)

stopPropagation()의 등장

때로는 이벤트가 상위 요소로 전파되는 것을 막고 싶을 때가 있습니다. 이럴 때 사용하는 것이 바로 stopPropagation() 메서드입니다.

stopPropagation()은 현재 이벤트의 전파를 중단시키는 역할을 합니다. 이 메서드를 호출하면, 이벤트는 현재 요소에서 멈추고 상위 요소로 전파되지 않습니다.

element.addEventListener('click', function(event) {
  event.stopPropagation();
  // 이벤트 처리 로직
});

실전 예제로 배우는 stopPropagation()

실제로 stopPropagation()을 어떻게 사용하는지 예제를 통해 살펴보겠습니다.

<div id="outer">
  외부 div
  <div id="inner">
    내부 div
    <button id="button">버튼</button>
  </div>
</div>

<script>
document.getElementById('outer').addEventListener('click', function() {
  console.log('외부 div 클릭');
});

document.getElementById('inner').addEventListener('click', function(event) {
  event.stopPropagation();
  console.log('내부 div 클릭');
});

document.getElementById('button').addEventListener('click', function() {
  console.log('버튼 클릭');
});
</script>

이 예제에서:

버튼을 클릭하면 "버튼 클릭", "내부 div 클릭"만 출력됩니다.
내부 div를 클릭하면 "내부 div 클릭"만 출력됩니다.
외부 div를 클릭하면 "외부 div 클릭"만 출력됩니다.

stopPropagation()을 사용함으로써, 내부 div에서 이벤트 전파를 중단시켜 외부 div의 클릭 이벤트가 발생하지 않도록 제어할 수 있습니다.

주의할 점: 이벤트 전파 중단의 함정

stopPropagation()은 강력한 도구이지만, 무분별하게 사용하면 예상치 못한 문제를 일으킬 수 있습니다:

분석 도구 방해: 일부 분석 도구는 전역 이벤트 리스너를 사용합니다. stopPropagation()을 과도하게 사용하면 이런 도구들이 제대로 작동하지 않을 수 있습니다.
코드 예측성 저하: 이벤트 전파를 중단시키면 다른 개발자들이 예상하지 못한 동작을 경험할 수 있습니다.
성능 문제: 모든 이벤트에 stopPropagation()을 사용하면, 불필요한 메서드 호출로 인해 성능이 저하될 수 있습니다.

따라서 stopPropagation()은 정말 필요한 경우에만 신중하게 사용해야 합니다.