[JavaScript] e.preventDefault()와 e.stopPropagation()의 차이점

e.preventDefault() VS e.stopPropagation()

자바스크립트 이벤트 리스너에서 e.preventDefault()와 e.stopPropagation() 둘 다 이벤트를 중단하는 메서드이다. 이 둘의 차이점과 어떤 상황에서 사용해야 하는지 정리해 보자.

먼저 이벤트 중단 시에 e.preventDefault()와 e.stopPropagation()가 어떤 역할을 하는지 간단하게 정리해 보았다.

e.preventDefault(): 현재 이벤트의 기본 동작을 중단한다.
e.stopPropagation(): 이벤트가 상위 DOM으로 전파되지 않도록 막는다.

이 외에도 e.stopImmediatePropagation()과 return false로 이벤트를 중단할 수 있다.

e.stopImmediatePropagation(): 현재 이벤트가 상위뿐만 아니라, 현재 레벨에 걸린 다른 이벤트의 동작도 중단한다.
return false: jQuery 사용 시에는 e.preventDefault()와 e.stopPropagation()를 모두 수행한 것과 같고, jQuery 사용 시에는 e.preventDefault()와 같다.

 

이벤트 전파란?

가장 최상위 태그를 클릭했을 때에는 최상위 태그 클릭 이벤트만 동작하지만, 가장 최하위 태그를 클릭했을 때에는 최하위 태그부터 최상위 태그의 클릭 이벤트까지 모두 동작한다. 즉 이벤트가 전파된다.

코드로 예를 들어보자. 최상위 태그는 div, 중간 태그는 p, 최하위 태그는 span으로 만들었다.

<div id="top">
  최상위 태그
  <p id="middle">
    중간 태그
    <span id="bottom">
      최하위 태그
    </span>
  </p>
</div>

$("#top").on("click",function(event){
    $("#console").append("최상위 태그 클릭 이벤트");
});

$("#middle").on("click",function(event){
    $("#console").append("중간 태그 클릭 이벤트");
});

$("#bottom").on("click",function(event){
    $("#console").append("최하위 태그 클릭 이벤트");
});

이때, 최하위 태그인 span을 클릭하면, div, p, span 태그의 클릭 이벤트가 모두 발생하게 된다.
따라서 아래처럼 콘솔이 찍히는 것을 확인할 수 있다.

최하위 태그 클릭 이벤트
중간 태그 클릭 이벤트
최상위 태그 클릭 이벤트

 

이벤트 전파를 막자! Event.stopPropagation()

위에서 설명했듯이, Event.stopPropagation()은 이벤트가 상위 DOM으로 전파되지 않도록 막는다.
최하위 태그의 클릭 이벤트에 Event.stopPropagation()을 추가하면 상위 DOM으로 이벤트가 전파되지 않아서 해당 태그의 이벤트만 동작한다.

위 코드에 Event.stopPropagation()을 추가해 보았다.

$("#top").on("click",function(event){
    $("#console").append("최상위 태그 클릭 이벤트");
});

$("#middle").on("click",function(event){
    $("#console").append("중간 태그 클릭 이벤트");
});

$("#bottom").on("click",function(event){
    $("#console").append("최하위 태그 클릭 이벤트");

    event.stopPropagation();
});

이때, 최하위 태그인 span을 클릭하면, 상위로 이벤트가 전파되지 않아서 span 태그의 클릭 이벤트만 발생한다.
따라서 아래처럼 콘솔이 찍히는 것을 확인할 수 있다.

최하위 태그 클릭 이벤트

 

같은 DOM의 다른 이벤트에도 전파를 막자! Event.stopImmediatePropagation()

만약 span 태그에 여러 이벤트가 걸려 있다면 어떻게 될까? 같은 DOM의 이벤트 모두 발생을 하게 된다.
다른 이벤트에 전파를 막아서 해당 이벤트만 실행하고자 한다면, Event.stopImmediatePropagation()을 사용하자.

$("#top").on("click",function(event){
    $("#console").append("최상위 태그 클릭 이벤트");
});

$("#middle").on("click",function(event){
    $("#console").append("중간 태그 클릭 이벤트");
});

$("#bottom").on("click",function(event){
    $("#console").append("최하위 태그 클릭 이벤트 - 1");

    event.stopImmediatePropagation();
});

$("#bottom").on("click",function(event){
    $("#console").append("최하위 태그 클릭 이벤트 - 2");

    event.stopPropagation();
});

이때, 최하위 태그인 span을 클릭하면, 상위로 이벤트가 전파되지 않고 같은 DOM에 이벤트가 전파되지 않는다.
따라서 아래처럼 콘솔이 찍히는 것을 확인할 수 있다.

최하위 태그 클릭 이벤트 - 1

 

현재 이벤트의 기본 동작을 막자! Event.preventDefault()

span 태그를 기본 동작이 있는 a태그로 변경해서 확인해 보자. 

<div id="top">
  최상위 태그
  <p id="middle">
    중간 태그
    <a id="bottom" href="https://www.naver.com" target="_blank">
      최하위 태그
    </a>
  </p>
</div>

$("#top").on("click",function(event){
    $("#console").append("최상위 태그 클릭 이벤트");
});

$("#middle").on("click",function(event){
    $("#console").append("중간 태그 클릭 이벤트");
});

$("#bottom").on("click",function(event){
    $("#console").append("최하위 태그 클릭 이벤트");

    event.stopPropagation();
});

이때, 최하위 태그인 a을 클릭하면, 상위로 이벤트가 전파되지 않지만 기본 동작인 URL 이동이 동작하고 있다.
따라서 아래처럼 콘솔이 찍히고 새창이 열리는 것을 확인할 수 있다.

최하위 태그 클릭 이벤트

이럴 경우에 Event.preventDefault()를 사용해서 기본 동작을 막을 수 있다.

$("#top").on("click",function(event){
    $("#console").append("최상위 태그 클릭 이벤트");
});

$("#middle").on("click",function(event){
    $("#console").append("중간 태그 클릭 이벤트");
});

$("#bottom").on("click",function(event){
    $("#console").append("최하위 태그 클릭 이벤트");

    event.stopPropagation();
    event.preventDefault();
});

이때, 최하위 태그인 a을 클릭하면, 상위로 이벤트가 전파되지 않으면서 기본 동작인 URL 이동이 동작하지 않는다.
따라서 아래처럼 콘솔이 찍히고 새창이 열리지 않는 것을 확인할 수 있다.

최하위 태그 클릭 이벤트

 

jQuery에서 stopPropagation()과 preventDefault() 모두! return false

jQuery를 사용하여 이벤트를 사용하는 경우, return false를 사용하면 stopPropagation()과 preventDefault() 모두 사용한 것과 다름없다.

$("#bottom").on("click",function(event){
    $("#console").append("최하위 태그 클릭 이벤트");

    return false;
});

 

참고 링크

https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault