stopPropagation Stop Event

stopPropagation 메서드는 이벤트의 전파(propagation)를 중지시키는 JavaScript의 메서드입니다. 이벤트 전파는 DOM 트리를 따라 이벤트가 상위 요소로 전달되는 것을 말합니다. stopPropagation 메서드를 호출하면 이벤트가 현재 요소에서 더 이상 상위 요소로 전파되지 않습니다.

stopPropagation 메서드를 사용하는 방법을 설명하기 위해 아래의 코드 예시를 제공하겠습니다.

<div id="outer" style="background-color: yellow; padding: 20px;">
  <div id="inner" style="background-color: lightblue; padding: 20px;">
    <button id="button">Click me!</button>
  </div>
</div>

위의 HTML 코드는 노란색 배경을 가진 outer 요소와 하늘색 배경을 가진 inner 요소, 그리고 button 요소로 구성되어 있습니다. 이제 JavaScript 코드를 통해 버튼 클릭 시 이벤트 전파를 중지하는 예시를 살펴보겠습니다.

const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
const button = document.getElementById('button');

outer.addEventListener('click', function (event) {
  console.log('Outer clicked');
});

inner.addEventListener('click', function (event) {
  console.log('Inner clicked');
  event.stopPropagation();
});

button.addEventListener('click', function (event) {
  console.log('Button clicked');
});

위의 JavaScript 코드에서는 inner 요소의 클릭 이벤트 핸들러에서 event.stopPropagation()을 호출하여 이벤트 전파를 중지하고 있습니다. 따라서 버튼을 클릭할 때는 'Button clicked'만 콘솔에 출력되고, inner 요소와 outer 요소의 클릭 이벤트는 발생하지 않습니다.

stopPropagation 메서드를 사용하면 이벤트가 특정 요소에서 처리되고 전파가 중지될 수 있습니다. 이를 통해 이벤트 처리의 범위를 제어하거나 부모 요소에 영향을 주지 않고 자식 요소에서 이벤트를 처리할 수 있습니다.