Event.preventDefault()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

Event 인터페이스의 preventDefault() 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정합니다.

preventDefault()를 호출한 이벤트도 수신기 중 하나에서 stopPropagation() 또는 stopImmediatePropagation()을 호출하기 전까지는 다른 이벤트와 마찬가지로 전파됩니다.

아래에도 적혀있지만, cancelable: true 없이 EventTarget.dispatchEvent()로 발송한 이벤트처럼 취소 불가능한 이벤트의 경우, preventDefault()를 호출해도 아무 효과도 나타나지 않습니다.

구문

event.preventDefault();

예제

기본 클릭 동작 방지하기

체크박스의 클릭 기본 동작은 체크박스를 체크하거나 체크 해제하는 것입니다. 이 예제는 체크박스의 클릭 기본 동작을 방지하는 모습을 보입니다.

JavaScript

document.querySelector("#id-checkbox").addEventListener(
  "click",
  function (event) {
    document.getElementById("output-box").innerHTML +=
      "죄송합니다! <code>preventDefault()</code> 때문에 체크할 수 없어요!<br>";
    event.preventDefault();
  },
  false,
);

HTML

html

<p>체크박스를 클릭해주세요.</p>

<form>
  <label for="id-checkbox">체크박스:</label>
  <input type="checkbox" id="id-checkbox" />
</form>

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

결과

키 입력이 입력 칸을 채우는 것을 방지하기

이 예제에서는 preventDefault()를 사용해서 사용자가 입력 칸에 원하지 않는 문자를 입력하지 못하도록 합니다. 실제로 이런 기능이 필요할 땐 내장 HTML 양식 검증을 사용하세요.

HTML

html

<div class="container">
  <p>이름을 입력하세요. 영문 소문자만 사용할 수 있습니다.</p>

  <form>
    <input type="text" id="my-textbox" />
  </form>
</div>

CSS

사용자가 잘못된 키를 누를 때 보여줄 경고창을 그리기 위한 CSS입니다.

css

.warning {
  border: 2px solid #f39389;
  border-radius: 2px;
  padding: 10px;
  position: absolute;
  background-color: #fbd8d4;
  color: #3b3c40;
}

JavaScript

이제 실제 작업을 수행할 JavaScript 코드입니다. 우선 keypress 이벤트를 수신합니다.

var myTextbox = document.getElementById("my-textbox");
myTextbox.addEventListener("keypress", checkName, false);

checkName() 함수는 사용자가 누른 키를 관찰해서 허용할지, 허용하지 않을지 결정합니다.

function checkName(evt) {
  var charCode = evt.charCode;
  if (charCode != 0) {
    if (charCode < 97 || charCode > 122) {
      evt.preventDefault();
      displayWarning(
        "영문 소문자만 입력하세요." + "\n" + "charCode: " + charCode + "\n",
      );
    }
  }
}

displayWarning() 함수는 경고창을 띄웁니다. 완벽한 모습은 아니지만 예제로는 충분합니다.

var warningTimeout;
var warningBox = document.createElement("div");
warningBox.className = "warning";

function displayWarning(msg) {
  warningBox.innerHTML = msg;

  if (document.body.contains(warningBox)) {
    window.clearTimeout(warningTimeout);
  } else {
    // insert warningBox after myTextbox
    myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
  }

  warningTimeout = window.setTimeout(function () {
    warningBox.parentNode.removeChild(warningBox);
    warningTimeout = -1;
  }, 2000);
}

결과

참고

이벤트 흐름의 어떤 단계에서라도 preventDefault()를 호출하면 이벤트를 취소합니다. 즉, 이벤트에 대한 구현체의 기본 동작을 실행하지 않습니다.

Event.cancelable을 사용해서 이벤트의 취소 가능 여부를 알아낼 수 있습니다. 취소 불가능한 이벤트에 대해 preventDefault()를 호출해도 아무 효과가 없습니다.

명세

Specification
DOM Standard # ref-for-dom-event-preventdefault③

브라우저 호환성

BCD tables only load in the browser