반응형
폼 사용시에 제출을 하게 되면
화면이 이동이 되거나,
url란에 제출한 데이터가 노출이 된다.
이것을 방지하기 위한 이벤트 방지 매서드가 있는데
prevenDefault() 이다.
예시
html 구조를 보면
<!DOCTYPE html>
<html lang="ko">
<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">
<link rel="stylesheet" href="./test.css">
<title>test</title>
</head>
<body>
<form action="/page">
<input type="text">
<button>버튼</button>
</form>
<script src="./test3.js"></script>
</body>
</html>
sumbit 하면 다른 화면으로 이동된다.
이런식 으로 화면이 이동된것을 확인할 수 있는데
해당 화면해서 폼을 작성해서 제출해야 하는 상황이다.
그럴 때 prevenDefault() 사용하면 기존 이벤트를 방지할 수 있다.
const form = document.querySelector('form');
form.addEventListener('submit', function(e){
e.preventDefault();
})이벤트로 submit 을 넣어주고 이벤트를 e인자로 받아서
매서드를 입력해주면
제출을 해도 화면이 이동하지 않는다.
반응형
'javascript' 카테고리의 다른 글
| 자바스크립트로 jquery siblings (0) | 2023.03.31 |
|---|---|
| 자바스크립트 이벤트 버블링과 방지 (0) | 2023.03.30 |
| 자바스크립트 구조 분해 할당 (0) | 2023.03.27 |
| 자바스크립트 스프레드 연산자 (0) | 2023.03.27 |
| 자바스크립트 DOM (0) | 2023.03.27 |
