1. e.preventDefault()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>회원가입</h3>
<form id="form">
<p>이름 : <input type="text" id="name" /></p>
<p>전화번호 : <input type="text" id="number" /></p>
<p> 직업 :
<select id="job">
<option value="학생">학생</option>
<option value="개발자">개발자</option>
</select>
</p>
<button type="submit">회원가입</button>
<button type="reset">취소</button>
</form>
<div id="result"></div>
<script src="main.js"></script>
</body>
</html>'use strict';
let resultContainer = document.getElementById('result');
let formContainer = document.getElementById('form');
let inputText = function (message) {
resultContainer.innerHTML = message;
}
formContainer.addEventListener('submit', function (e) {;
e.preventDefault();
let inputName = document.getElementById('name');
let inputNumber = document.getElementById('number');
let selectJob = document.getElementById('job');
let message = `${inputName.value}<br/> ${inputNumber.value}<br/> ${selectJob.value}`;
inputText(message);
});
수업 중에 간단한 예제를 구현해보았는데, 이는 간단한 텍스트를 입력과 선택창을 활용하여 버튼을 누르면, 입력했던 텍스트와 선택했던 값을 출력하는 홈페이지이다.
여기서 JS 코드 중간에 submit 이라는 이벤트 타입이 있다. 이는 기본 브라우저에서 제공하는 이벤트인데, HTML 폼의 경우는 제출하면 기본적으로 페이지가 새로고침이 되고, 입력된 데이터는 서버로 전송이 된다.
근데 여기서 자바스크립트를 사용해 폼을 제출을 처리할 때, 새로 고침 없이 데이터를 다뤄야 할때가 있다.
그것이 바로 e.preventDefault(); 를 사용하는 것인데, 브라우저에서 기본으로 제공하는 이벤트로 새로고침이 되는 것을 막을 수가 있으며, 새로 고침이 되지 않고, 자바스크립트에서 폼 데이터를 처리할 수 있다.
2. e.target
현재 코드에서는 e.target 쓰이지 않았다. 우선 e.target은 동일한 이벤트 핸들러로 여러 요소를 제어할 수 있게 해주는 속성이다.
위 같은 코드에서 사용하기 좋은 속성이다. 여러 요소를 하나의 핸드러에서 처리 할 수 있기 때문이다.
위 코드에서 사용하지 않은 이유는
일단 복잡한 로직이 아니기때문에, 간단하게 처리하기 위해서 사용했다. 특정 필드에서 값을 가져오는데, 좀 더 직관적이므로 사용하게 되었다.
그리고 아직은 이벤트 핸들러에 대한 개념이 부족하여, 사용한 것도 있다. 다음에 이보다 복잡한 기능을 구현하고자 할 때, 사용해봐야 겠다.
위에 e.target과 e.preventDefault()는 참 유용한 속성인 것 같다. 추후 프로젝트에서 많이 사용할 것 같다.
'JavaScript' 카테고리의 다른 글
| getComputedStyle() (0) | 2024.09.23 |
|---|---|
| 배열의 함수 (map(), filter(), every(), sort()) (0) | 2024.09.14 |
| [모던자바스크립트 Deep Dive] 15장. let, const 키워드와 블록 레벨 스코프 (0) | 2024.09.11 |
| [모던자바스크립트 Deep Dive] 14장. 전역 변수의 문제점 (0) | 2024.09.10 |
| JavaScript 함수 용어 (1) | 2024.09.05 |
