[JavaScript] event.preventDefault()와 event.stopPropagation() 사용법과 차이점

안녕하세요. 소다맛사탕 입니다.

오늘은 기본적인 자바스크립트 이벤트 인터페이스 중 return과 같은 역할을 하는 preventDefault() 메서드와 stopPropagation() 메서드를 알아보겠습니다.

 

1. event.preventDefault();

어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 브라우저의 기본 동작을 실행하지 않도록 지정.

사용법

HTML과 JavaScript를 활용해서 간단하게 테스트 결과를 명시하겠습니다.

<a href="https://develop-sense.tistory.com" id="urlConnect">이동테스트</a>
<label for="chk_1">체크테스트</label>
<input type="checkbox" name="chkTest" id="chk_1"/>
<input type="button" name="clickTest" value="테스트" />
<input type="text" name="changeValue" value=""/>
<button type="text" name="btnValue"></button>

$("#urlConnect").click(function(){
  console.log(event);
  // 이벤트 기본동작 실행 막기
  // url 이동 막기
  event.preventDefault();
});

$("input[name=chkTest]").click(function(){
  console.log(event);
  // 이벤트 기본동작 실행 막기
  // 체크박스 선택 막기
  event.preventDefault();
});

$("input[name=clickTest]").click(function(){
  // 이벤트 기본 클릭동작을 방지하는 걸 확인.
  // 텍스트 적용은 바뀌지 않는다.(input, button)
  event.preventDefault();
  $("input[name=changeValue]").val("테스트");
  $("button[name=btnValue]").html("버튼테스트");
});

위와 같이 event.preventDefault() 메서드는 기본 클릭 동작을 막는 것을 확인할 수 있습니다.

링크나 체크박스가 선택되지 않는 것을 확인했습니다.

하지만, 텍스트를 적용하는 것은 이벤트가 막히지 않는 것을 확인했습니다.

---

2. event.stopPropagation();

현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파 되지 않도록 방지.

사용법

<div id="headArea">
  <div id="subArea">
    <ul id="ulArea">
      <li id="li01">test1</li>
      <li id="li02">test2</li>
      <li id="li03">test3</li>
      <li id="li04">test4</li>
    </ul>
    <p id="ptagArea">여기글있다.</p>
  </div>
</div>

// p 태그를 클릭시
$("#ptagArea").click(function(){
  event.stopPropagation();
  console.log("p 태그 클릭함");
});
// li 태그 클릭시
$("#li01").click(function(){
  event.stopPropagation();
  console.log("li01로 전파 확인");
});
$("#li04").click(function(){
  console.log("li04로 전파 확인");
});
$("#ulArea").click(function(){
  console.log("ul 태그 전파 확인");
});
$("#subArea").click(function(){
  $("#ptagArea").html("develop-sense.tistory.com");
  console.log("div sub로 전파 확인");
});
$("#headArea").click(function(){
  $("#li01").html("바뀌는지 확인");
  console.log("div header로 전파 확인");
});

위와 같이 event.stopPropagation() 메서드를 선언하게 되면, 

p 태그를 클릭하면 이벤트 버블링을 막으면서 'div sub로 전파 확인'이 되지 않고, 텍스트도 변경되지 않는 것을 확인 할 수 있습니다.

마찬가지로, li 태그에서 li01이라는 id를 클릭하면 상위로 가는 전파를 막으면서 텍스트가 변경되지 않는 것을 확인했습니다.

하지만, event.stopPropagation() 메서드를 적용하지 않은 id를 클릭하면 p태그, li 태그 텍스트 변경뿐만 아니라 console 로그도 찍히는 것을 확인 할 수 있습니다.

 

★ preventDefault()  VS. stopPropagation()

이벤트의 전달을 막는 방법의 차이가 있을뿐이지 사실상 return의 대체 역할이라 할 수 있습니다.

하지만, stopPropagation()은 링크나 버튼을 클릭을 막진 못하고, 상위 태그까지의 전파를 막습니다.

preventDefault()는 기본적인 클릭 동작만 막을뿐 외부에서 들어온 동작을 직접적으로 막거나 하진 않습니다.

 

그래서 하위 태그안에 이벤트 발생의 전파가 되냐 안되냐의 차이와 기본 클릭 동작 여부 차이로 볼 수 있습니다.

---

참고로, event 인터페이스는 I.E에서 동작하지 않을 수 있습니다. 그렇기에 아래와 같이...

if(event){	}

이벤트 여부를 판단하여 메서드를 실행하는 코드를 삽입하는 것을 추천합니다.

 

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