자바스크립트 event.stopPropagation() 사용하는 방법은?

Last Modified : 2017-05-19 / Created : 2017-05-19

22,609
View Count

주소 복사하기

# event.stopPropagation() 사용하기

자바스크립트에서 stopPropagation() 메서드는 event 객체의 버블링을 제거해줍니다. event.defaultPrevent()와 함께 매우 자주 사용되는 중요한 메서드입니다.

여기서 event 버블링이란 이벤트가 연속하여 발생하는 버블 현상을 의미합니다. 이벤트는 이벤트캡쳐링과 이벤트버블링으로 나타나는데 클릭이 발생한 경우를 예로들면 클릭 시점에 해당 위치에서 이벤트가 발생하고 발생하고 다시 겹쳐진 요소를 올라가면서 해당 엘리먼트의 이벤트를 다시 발생시키는 현상을 의미합니다.

이 경우 의도하지 않은 두 번째 이벤트가 추가로 발생하여 오류가 발생할 수 있습니다. 이를 피하기 위한 방법으로 event.stopPropagation()을 사용하며 이 경우 이벤트 버블링은 Firing 하지 않아 이벤트가 발생되지 않습니다.

# event.stopPropagation() 예제보기

아래는 간단한 예제소스입니다. 클릭할 경우 div 요소의 이벤트도 발생할 것으로 예상할 수 있습니다. stopPropagation()을 사용하여 이벤트 버블링을 제거하여줍니다.

<div onclick="showmsg()">
  <p onclick="showmsg()">Click Me!!</p>
</div>

아래는 스크립트 소스입니다.

function showmsg = function() {
  event.stopPropagation();
  console.log('Webisfree');
}

참고로 IE 9 이상에서 호환됩니다.

아래의 글도 찾고 계시지 않나요?

LESS CSS에서 변수 선언 및 사용 예제는?

자바스크립트의 싱글스레드 방식 이해하기