JS e.preventDefault()와 e.stopPropagation()

e.preventDefault()와 e.stopPropgation 모두 이벤트를 제어할 때 사용되는 메소드다. 이 2가지가 가장 자주 사용되는 이벤트 제어 메소드로 여기서 소개하고 그 외 다른 메소드는 이벤트 메서드MDN을 참고해보자.

---

e.preventDefault()

e.preventDefault() 용도

e.preventDefault()는 브라우저에서 구현된 태그의 기본 동작을 막을 때 사용한다.
태그의 브라우저 동작이란 이후 예시에서와 같이 <a>태그, <input>태그 등에서 브라우저에서 구현된 기본 동작을 말한다. <a>태그에서는 href속성의 링크로 이동하고 <input>태그에서 key입력을 받는 등의 액션이다.

e.preventDefault() 사용 예시

예시 1)
<a> 태그의 기본 동작 막기 예시: 다음 예시에서 <a> 태그의 브라우저 기본 동작인 해당 링크로 이동하는 작업의 동작이 취소되고 이벤트 핸들러로 등록한 stopDefAction 함수만 실행된다.

function stopDefAction(event) {
  event.preventDefault();
  console.log('foo'); // 브라우저에서 tistory페이지를 열지 않고 콘솔만 찍게 된다.
}

<a href="https://wantyouring.tistory.com/" onclick="stopDefAction(event);">원추링 티스토리</a>

예시 2)
<input type="text"> 태그의 올바르지 않은 텍스트 입력 막기 예시: text type <input> 태그의 브라우저 기본 동작인 text 필드에 값이 입력되는 동작이 조건에 따라 취소되어 원하는 타입의 문자만 입력받을 수 있다.

function checkName(evt) {
var charCode = evt.charCode;

  if (charCode != 0) {
    if (charCode < 97 || charCode > 122) {
      evt.preventDefault();
      alert("소문자만 입력할 수 있습니다." + "\n"
            + "charCode: " + charCode + "\n"
      );
    }
  }
}

<input type="text" onkeypress="checkName(event);"/>

---

e.stopPropagation()

e.stopPropagation() 용도

e.stopPropagation()은 이벤트의 전달을 막는 메소드이다.
브라우저에서 이벤트는 캡처링과 버블링 과정을 통해 전달되는데 e.stopPropagation() 메소드를 사용하면 현재 이벤트 이후의 캡처링 혹은 버블링 전달을 막을 수 있다.
특별한 상황이 아니면 버블링으로 전달되므로 버블링으로 전달되는 케이스에서 고려하면 이벤트가 부모 요소로 전달되는 것을 막을 수 있다.

e.stopPropagation() 사용 예시

다음은 이벤트 전달을 막아서 사용하는 예시이다.

function handleOuterClick(){ 
  console.log("click outer"); 
};
function handleInnerClick(e){ 
  e.stopPropagation(); // 부모로 event 전달 막기
  console.log("click inner"); 
};

<div id="outer" onclick="handleOuterClick(e)">
  <div id="inner" onclick="handleInnerClick(e)">
    click
  </div>
</div>

위 코드는 inner div 태그와 outer div 태그 모두 onclick 이벤트 리스너가 걸려있는데 중첩된 구조라 inner div를 클릭하면 outer div까지 클릭 이벤트가 전달되는 구조이다. 이러한 중첩된 구조에서 e.stopPropagation()을 통해 inner div 태그를 클릭했을 때 outer div의 이벤트 핸들러는 동작하지 않도록 구현할 수 있다.

---

정리

e.preventDefault()는 브라우저에서 구현된 태그의 고유한 동작을 막는 역할을 하고 e.stopPropagation()은 이벤트의 전파(버블링, 캡처링)를 막는다.