[JS] event.preventDefault();

 

event.preventDefault() 

event.preventDefault() 메서드는 이벤트의 기본 동작을 취소하는 JavaScript 메서드입니다.

 

예를 들어 사용자가 필수 필드를 모두 작성하지 않고 양식을 제출하지 못하도록 이벤트의 기본 작업을 방지할 수 있습니다 

e.preventDefault()다음은 이 방법을 사용하는 방법에 대한 몇 가지 예입니다 .

• 필수 필드를 모두 작성하지 않은 채 양식이 제출되는 것을 방지합니다.
• 링크를 따라가는 것을 방지합니다.
• 파일이 업로드되는 것을 방지합니다.
• 드래그 앤 드롭 작업이 완료되는 것을 방지합니다.

 

[예제1] a태그 링크로 이동하는 기본동작을 방지

<a href="https://rebornbb.tistory.com/" id="urlConnect">이동</a>

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

 

 

[예제2] 체크박스 기본 동작을 방지

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

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

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

document.querySelector("#id-checkbox").addEventListener(
  "click",
  function (e) {
    alert("죄송합니다 preventDefault() 때문에 체크할 수 없어요");
    e.preventDefault();
  },
  false,
);

체크박스의 클릭 기본 동작은 체크박스를 체크하거나 체크 해제하는 것입니다.

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

 

 

[예제3] input 박스를 채우는 것을 방지

<input type="text" id="input"/>

const input = document.getElementById("input");

input.addEventListener("keypress", (event) => {
  const value = event.target.value;

  // 숫자만 허용하는 정규식을 사용한다.
  const regex = /^[0-9]*$/;

  if (!regex.test(value)) {
    // 숫자가 아닐 경우 이벤트를 방지한다.
    event.preventDefault();
    alert("숫자가아님");
  }
});

이 예제에서는 preventDefault()를 사용해서 사용자가 입력 칸에 원하지 않는 문자를 입력하지 못하도록 합니다. 

input에 숫자외에 텍스트를 입력하고 엔터를 누르면 숫자가아님이라는 경고창이 뜹니다.