stopPropagation()에 대해서 질문 있습니다.

작성한 질문수 4

1

안녕하세요 Eddie님! 남겨주신 질문을 보니 DOM 이벤트 전파 흐름의 핵심을 아주 깊이 있게 파고들고 계시네요. 질문해주신 내용 중 용어에 대한 약간의 오해가 있으셨던 것 같아 이 부분부터 명확히 짚어드리고, 어떻게 동작하는지 상세히 설명해 드리겠습니다.

강의에서 말씀드린 상위로 전파 차단이라는 표현은 캡처링이 아니라 버블링을 의미하는 것입니다. 브라우저의 이벤트 흐름은 최상단 부모에서 실제 클릭된 타겟 요소로 파고 내려가는 캡처링 단계와, 타겟에서 다시 부모 요소들을 타고 위로 올라가는 버블링 단계로 나뉩니다. 즉, 부모 요소라는 상위로 이벤트가 전파된다는 것은 곧 버블링을 뜻합니다. 여기에 딥다이브를 좋아하시는 Eddie님을 위해 아주 사소한 팁을 하나 더 얹어드리자면, DOM 이벤트 흐름은 엄밀히 말해 최상위에서 내려오는 캡처링 단계, 실제 클릭한 요소에 도달하는 타겟 단계, 그리고 다시 위로 올라가는 버블링 단계라는 세 가지 과정으로 이루어집니다. 비록 흐름의 방향성을 설명하기 위해 타겟 단계를 생략하고 말씀드렸지만, 이 세 단계를 모두 알아두시면 이해가 훨씬 깊어지실 겁니다.

Eddie님이 강의를 모두 들으신 후 이해하신 내용이 아주 정확합니다. stopPropagation 함수는 단순히 버블링만 막는 것도 아니고 캡처링만 막는 것도 아닙니다. 이 함수의 정확한 동작 원리는, 현재 이벤트가 캡처링 단계에 있든 버블링 단계에 있든 상관없이 이 함수가 호출된 바로 그 시점부터 더 이상의 이벤트 전파를 완전히 끊어버리는 것입니다.

만약 캡처링 단계의 이벤트 리스너에서 이 메서드를 호출하면 어떻게 될지 아래 코드로 살펴보겠습니다.

// 부모 요소의 캡처링 단계에서 전파를 막는 예시입니다.
parentElement.addEventListener('click', (e) => {
  e.stopPropagation(); 
  console.log('부모 캡처링 단계');
}, { capture: true });

// 자식 요소의 이벤트 리스너입니다.
childElement.addEventListener('click', (e) => {
  console.log('자식 클릭 이벤트'); 
});

위의 예시처럼 캡처링 옵션을 켠 부모 요소에서 stopPropagation을 호출하게 되면, 이벤트가 타겟인 자식 요소까지 채 내려가기도 전에 흐름이 멈춰버리게 되어 자식 요소의 클릭 이벤트는 절대 실행되지 않습니다. 반대로 우리가 흔히 작성하는 기본 이벤트 리스너는 버블링 단계에서 동작하므로, 자식 요소에서 호출하게 되면 부모 요소로 클릭 이벤트가 올라가는 상위 전파를 막아주게 되는 것입니다.

따라서 강의에서 상위로 전파 차단이라고 설명해 드린 것은, 실무에서 우리가 작성하는 대부분의 이벤트 핸들러가 기본적으로 버블링 단계에서 동작하기 때문에 가장 흔하게 마주하는 맥락을 강조해서 말씀드린 것입니다. 실제로 실무에서는 모달 창이나 팝업 메뉴를 구현할 때 이 방식을 아주 유용하게 활용합니다. 예를 들어, 어두운 배경 영역을 클릭하면 모달이 닫히도록 구현해 두었는데 사용자가 모달 내부의 버튼이나 폼을 클릭했을 때도 이벤트가 배경으로 버블링되어 모달이 의도치 않게 닫혀버리는 문제가 발생할 수 있습니다. 이때 모달 내부 요소에 stopPropagation을 걸어주면, 클릭 이벤트가 배경으로 전파되는 것을 완벽하게 막아주어 이러한 이슈를 깔끔하게 해결할 수 있습니다.

하지만 Eddie님이 파악하신 것처럼 이벤트의 위아래 방향에 국한되지 않고, 이벤트 흐름 자체를 그 자리에서 정지시킨다는 것이 이 메서드에 대한 가장 완벽한 이해입니다. 이렇게 꼼꼼하게 강의를 수강하시고 핵심을 꿰뚫는 좋은 질문 남겨주셔서 진심으로 감사드립니다. 추가로 우리동네코딩스튜디오에서 관심 있는 강의가 있으시다면 jeony0535@naver.com 이메일로 연락해 주시면 할인 쿠폰을 전달해 드리겠습니다!

1

안녕하세요, 인프런 AI 인턴입니다. eddie님.

stopPropagation() 메서드에 대해 질문해 주셨군요. 이 메서드는 이벤트가 발생할 때 이벤트 전파를 중단시키는 역할을 합니다. 기본적으로 DOM 이벤트는 두 가지 방식으로 전파됩니다: 캡처링(capturing phase)과 버블링(bubbling phase)입니다.

이벤트 전파

1. 캡처링 단계: 이벤트가 최상위 루트에서 목표 요소에 도달하는 상향식 전파 과정입니다.
   
2. 버블링 단계: 반대 방향으로 목표 요소에서 최상위 루트로 전파되는 하향식 과정입니다.
   
3. stopPropagation(): 현재 이벤트의 전파를 중단시켜, 캡처링과 버블링의 나머지 과정을 멈춥니다.
   

주의할 점

• stopPropagation()을 사용하면 이벤트는 현재 요소까지만 처리되고, 더 이상 상위 요소로 전파되지 않습니다. 즉, 캡처링과 버블링 모두 차단됩니다.
  
• 따라서 “상위로의 전파 차단”이라는 설명은 보다 정확하게는 이벤트가 현재 단계(캡처링 또는 버블링)에서 더 이상 상위 요소로 전파되지 않음을 의미합니다.
  

관련하여 더 이해하기 쉽게 설명된 자료를 원하시면, 다음의 유사한 질문에 대한 답변을 참고하시는 것도 좋을 것 같습니다:

• JavaScript 이벤트 전파에 대한 이해 – 캡처링과 버블링
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏

추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.