Programming/JavaScript
event.preventDefault()로 submit 이벤트 발생시 reload 안하기
Chanho.
2019. 12. 22. 23:09
반응형
event.preventDefault()
- html에서 a태그나 submit 태그는 고유의 동작으로 페이지를 이동시키거나, form 안에 input등을 전송하는 동작이 있는데 e.preventDefault()는 그 동작을 중지시키는 역할을 한다.
- input 또는 button 클릭 이벤트가 발생 했을때 페이지가 리로드가 되는데 그 현상을 막아줌
HTML
<body>
<div class="js-clock">
<h1>00:00</h1>
</div>
<form class="js-form form">
<input type="text" placeholder="당신의 이름은?" />
</form>
<h4 class="js-greetings greetings"></h4>
<button type="submit" class="js-logout logout" onclick="removeName()">로그아웃</button>
<form class="js-toDoForm">
<input type="text" placeholder="Write a to do" />
</form>
<ul class="js-toDoList"></ul>
<script src="clock.js"></script>
<script src="greeting.js"></script>
<script src="todo.js"></script>
</body>JS
const toDoForm = document.querySelector('.js-toDoForm'),
toDoInput = toDoForm.querySelector('input'),
toDoList = document.querySelector('.js-toDoList')
const TODOS_LS = 'toDos'
function paintToDo(text) {
const li = document.createElement('li')
const delBtn = document.createElement('button')
delBtn.innerText = '❌'
const span = document.createElement('span')
span.innerText = text
li.appendChild(delBtn)
li.appendChild(span)
toDoList.appendChild(li)
}
function handleSubmit(event) {
event.preventDefault()
const currentValue = toDoInput.value
paintToDo(currentValue)
toDoInput.value = '' //submit처럼 값을 보냈을때 input창에 있는 값 초기화
}
function loadToDos() {
const toDos = localStorage.getItem(TODOS_LS)
if (toDos !== null) {
}
}
function init() {
loadToDos()
//input 태그에 submit 이벤트가 발생했을 경우
toDoForm.addEventListener('submit', handleSubmit)
}
init()
브라우저
