자바스크립트 이벤트 전파 중단: stopPropagation()

이벤트 전파란?

자바스크립트에서 이벤트 전파란 DOM에서 이벤트가 발생했을 때, 해당 엘리먼트를 기준으로 상위 엘리먼트나 하위 엘리먼트로 이벤트가 전달되는 것을 뜻합니다. 이벤트 전파는 기본적으로 상위에서 하위로 전달되는 버블링(bubbling)과 하위에서 상위로 전달되는 캡처링(capturing) 두 가지 방식이 있습니다.

stopPropagation()

stopPropagation()은 이벤트의 버블링이나 캡처링 전파를 중단시키는 메소드입니다. 예를 들어, 하위 엘리먼트에 이벤트 핸들러를 설정했지만, 상위 엘리먼트에서도 동일한 이벤트 핸들러를 설정할 경우, stopPropagation()을 사용하여 상위 엘리먼트의 이벤트 전파를 중단시켜 중복 실행되는 것을 방지할 수 있습니다.

// 버블링 방지 예제
const innerDiv = document.querySelector('#innerDiv');
const outerDiv = document.querySelector('#outerDiv');

innerDiv.addEventListener('click', function(event) {
  event.stopPropagation();
  console.log('innerDiv is clicked!');
});

outerDiv.addEventListener('click', function(event) {
  console.log('outerDiv is clicked!');
});

위 코드에서 innerDiv와 outerDiv 엘리먼트 모두 클릭 이벤트 핸들러가 설정된 상태이며, innerDiv를 클릭할 경우 “innerDiv is clicked!”가 출력됩니다. 하지만, outerDiv를 클릭할 경우 브라우저 콘솔에 “outerDiv is clicked!”와 함께 “innerDiv is clicked!”가 같이 출력됩니다. 하위 엘리먼트에서 클릭 이벤트가 발생했음에도 불구하고 상위 엘리먼트의 클릭 이벤트 핸들러가 실행되기 때문입니다.

이 경우, innerDiv의 클릭 이벤트 핸들러에서 event.stopPropagation()을 사용하여 이벤트의 버블링 전파를 중단시키면 outerDiv의 클릭 이벤트 핸들러가 중복으로 실행되지 않습니다.

결론

stopPropagation() 메소드를 사용하여 이벤트 전파를 중단시킬 수 있습니다. 이를 통해 중복 실행되는 문제를 해결할 수 있으며, 필요한 경우 이벤트 전파를 컨트롤하는 데에 유용합니다.

자바스크립트 이벤트 전파 중단은 이벤트 전파를 막는 방법으로 stopPropagation() 메소드를 사용합니다.