반응형
글 작성 동기
js 미니 프로젝트를 하는 중, 서버에서 값을 받아오는데 페이지가 강제로 갱신되는 일이 있었습니다.
이를 preventDefault()로 해결할 수 있었는데, 이를 사용할 일이 앞으로도 많을 것 같아서 기록하였습니다.
preventDefault()란?
이벤트의 기본 행동을 막을 수 있습니다.
예시 1)
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script defer src="./tes2t.js"></script>
<title>Document</title>
</head>
<body>
<form>
<button class="testb" type="submit">hah</button>
</form>
</body>
</html>js
const a = document.querySelector(".testb");
a.addEventListener("click", (event) => {
event.preventDefault();
});버튼을 누르면 type이 submit이기 때문에 페이지가 새로고침이 되어야 하지만, preventDefault()를 사용할 경우 새로고침이 되지 않습니다.
예시 2)
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script defer src="./tes2t.js"></script>
<title>Document</title>
</head>
<body>
<label for="on">숫자만 입력하세요</label>
<input type="text" class="onlyNum" id="on" />
</body>
</html>js
const checkNum = (event) => {
let code = event.key;
console.log(code);
if (code >= 5) {
event.preventDefault();
alert("5이상은 안돼~");
}
};
let a = document.querySelector(".onlyNum");
a.addEventListener("keydown", checkNum, false);값이 5 이상 입력되면 preventDefault()를 이용해서 입력되는 기본 명령을 없애서 입력 못하게 하는 코드입니다.
5 이상 입력하면 팝업!
반응형
'공부 정리 > 웹(Web)' 카테고리의 다른 글
| JS 배열 필수함수 (Array Function) (0) | 2022.03.25 |
|---|---|
| JS this (0) | 2022.03.18 |
| JS .js 와 .mjs (0) | 2022.03.13 |
| JS Primitive type checking (0) | 2022.03.10 |
| JS IIFE (0) | 2022.03.08 |
댓글