강의를 들으며 사용한 코드에 대해 전부 알아보고 공부하기 위해 정리해보겠다!
Submit event
Submit 이벤트는 <form>이 제출될 때 발생한다. <form>요소 자체에서 발생하며, 그 안에 있는 <button>이나 <input type="submit">에서는 발생하지 않는다. 하지만 SubmitEvent에는 제출 요청을 Trigger한 버튼인 Submitter 속성이 포함되어있다.
사용자가 Submit 버튼을 클릭하거나 양식(form)내의 필드를 편집하면 발생한다.
addEventListener()와 같은 메서드에서 이벤트 이름을 사용하거나 이벤트 핸들러 속성을 설정한다.
<form id="form">
<label>Test field: <input type="text" /></label>
<br /><br />
<button type="submit">Submit form</button>
</form>
<p id="log"></p>function logSubmit(event) {
log.textContent = `Form Submitted! Timestamp: ${event.timeStamp}`;
event.preventDefault();
}
const form = document.getElementById("form");
const log = document.getElementById("log");
form.addEventListener("submit", logSubmit);
Event.preventDefault()
Event 인터페이스의 preventDefault() 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 기본 동작을 실행하지 않도록 지정한다.
✶ preventDefault()를 호출한 이벤트도 stopPropagation() 또는 stopImmediatePropagation()을 호출하기 전까지는 다른 이벤트와 마찬가지로 전파된다. (이벤트 전파 / Bubbling이나 Capture단계)
이벤트 전파와 관련해서는 추후에 다시 알아보자.
내가 이 메서드를 쓴 이유는 Submit 이벤트시 reload되는 것 때문이었다. 새로고침 없이 Submit된 값을 저장하여 사용하고 싶었다.
브라우저 첫 접속시 User name을 localStorage에 저장하는 것 때문에 처음 사용해보았다.
<!DOCTYPE html>
<html>
<head>
<title>폼 제출 예제</title>
</head>
<body>
<form id="myForm">
<label for="name">이름:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">이메일:</label>
<input type="email" id="email" name="email" required>
<br>
<input type="submit" value="제출">
</form>
<div id="result"></div>
<script src="script.js"></script>
</body>
</html>
document.addEventListener("DOMContentLoaded", function() {
var myForm = document.getElementById("myForm");
var resultDiv = document.getElementById("result");
myForm.addEventListener("submit", function(event) {
event.preventDefault(); // 기본 제출 동작을 중지
// 폼 데이터를 가져오기
var formData = new FormData(myForm);
var formDataObject = {};
formData.forEach(function(value, key) {
formDataObject[key] = value;
});
// 가져온 데이터를 출력하기 (이 부분을 원하는 대로 수정 가능)
resultDiv.innerHTML = "제출된 데이터: " + JSON.stringify(formDataObject);
});
});폼 데이터를 가져오기 위해 FormData 객체를 사용하고, 이를 JavaScript 객체로 변환하여 출력하는 코드.
Submit 말고도 checkbox, keypress 등 여러 이벤트를 제어하기 위해 사용된다.
[Event: preventDefault() method]
ChatGPT 🤖
'JavaScript' 카테고리의 다른 글
| 내장객체 Math로 랜덤 Background Image 적용하기 (2) | 2023.08.29 |
|---|---|
| Date() 생성자와 내장 메서드로 시계 깔끔하게 적용하기 (0) | 2023.08.29 |
| 로컬 스토리지 localStorage 와 세션 스토리지 sessionStorage (0) | 2023.08.28 |
| 상수를 대문자로 쓰는 이유? 뿌리를 알아보자! (0) | 2023.08.28 |
| 자료구조, 배열 Arrays, 내장 메서드로 재배열 하기 (0) | 2023.08.19 |