[JS] event.preventDefault()란?

event.preventDefault()가 뭐지

 

a 태그나 submit 태그는 누르게 되면 href를 통해 이동하거나 창이 새로고침이 되는데, 이때 preventDefault를 사용해서 동작을 멈출 수 있다.

 

const checkbox = document.querySelector("#id-checkbox");

checkbox.addEventListener("click", checkboxClick, false);

function checkboxClick(event) {
  let warn = "preventDefault() won't let you check this!<br>";
  document.getElementById("output-box").innerHTML += warn;
  event.preventDefault();
}

<p>Please click on the checkbox control.</p>

<form>
  <label for="id-checkbox">Checkbox:</label>
  <input type="checkbox" id="id-checkbox" />
</form>

<div id="output-box"></div>

 

위 예시는 preventDefault()를 통해서 체크박스 클릭 시 메시지를 출력하고, 체크박스를 조작할 수 없게 만드는 코드이다.

 

stopPropagation()이랑은 뭐가 다르지

preventDefault()와는 달리 이벤트 버블링을 막을 수 있다. 이때 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 상위의 화면 요소들로 전달되어 가는 특성을 의미한다.

 

이벤트 버블링

 

 

참고

https://velog.io/@hang_kem_0531/JS-event.preventDefault-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault