티스토리 뷰

Language/JavaScript

<JavaScript> submit 발생 시 새로고침 방지하기

무화과(Fig) 2022. 2. 19. 19:44

 

 

 

form 태그에서 input또는 button 클릭 이벤트 발생 시 페이지가 reload 된다.
이것을 방지하기 위한 방법은 event.preventDefault()를 사용하는 것이다.

 

event.preventDefault() 는 브라우저의 기본 동작을 막아주는 역할을 한다.

 


 
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">
  <link rel="stylesheet" href="style.css">
  <title>Momentum APP</title>
</head>
<body>
  <form id="todo-form">
    <input type="text" placeholder="Wirte a To Do and Press Enter"  required />
  </form>
  <ul id="todo-list"></ul>
  <script src="todo.js"></script>
</body>
</html>

 

 

js

const toDoForm = document.getElementById("todo-form");
const toDoList = document.getElementById("todo-list");


function handleToDoSubmit(event){
    event.preventDefault();
}

toDoForm.addEventListener("submit", handleToDoSubmit);

'Language > JavaScript' 카테고리의 다른 글

[Javascript] prompt(), confirm(), alert() 사용 방법  (0) 2022.06.22
[JavaScript] return과 break의 차이  (0) 2022.06.15
[JavaScript] e.stopPropagation(), e.preventDefault()  (0) 2022.06.12
[JavaScript] 데이터 타입  (0) 2022.05.03
[JavaScript] 변수(Variable)를 명명하는 규칙  (0) 2022.05.02
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함