- 변수명 앞에 $표기시가 붙는 이유?
변수가 담는것이 dom element를 읽는것임을 명시하기 위해서
[html]
<body>
<form>
<p>연락 수단을 선택해주세요!</p>
<div>
<input type="radio" id="contactMethod1" name="contact" value="email" />
<label for="contactMethod1">Email</label>
<input type="radio" id="contactMethod2" name="contact" value="phone" />
<label for="contactMethod2">Phone</label>
<input type="radio" id="contactMethod3" name="contact" value="email" />
<label for="contactMethod3">Email</label>
</div>
<p>배송 방법을 선택해주세요!</p>
<div>
<input type="radio" id="deliveryMethod1" name="delivery" value="ship" />
<label for="deliveryMethod1">Ship</label>
<input type="radio" id="deliveryMethod2" name="delivery" value="plane" />
<label for="deliveryMethod2">Plane</label>
<input type="radio" id="deliveryMethod3" name="delivery" value="car" />
<label for="deliveryMethod3">Car</label>
</div>
<div class="SubmitButtonContainer">
<button type="submit">확인</button>
</div>
</form>
<span class="CurrentItem"></span> //현재 선택된 값 임시로 보여주기
<script src="./index.js"></script>
</body>- 관련된 input끼리 radiobox wrap
- 여러개 input이 있을때 name속성이 모두 같아야 브라우저에서 radio group으로 인식할 수 있다.
- CurrentItem 클래스로 현재 선택된 값 임시로 보여주는 영역 생성
[js]
const $currentItem = document.querySelector('.CurrentItem');
const $formTag = document.querySelector('form');
$formTag.addEventListener('submit', (e) => {
e.preventDefault() //1
const formRecords = Array.from(new FormData($formTag)) //2
const formMap = {
contact: '연락 수단',
delivery: '배송 수단'
}
//3
if(Object.keys(formMap).length !== formRecords.length){
$currentItem.innerHTML = '선택사항을 클릭해주세요.'
return
}
//4
$currentItem.innerHTML = formRecords.map((record) => `${formMap[record[0]]}: ${record[1]}`).join('<br>')
});
- 변수명 앞에 $표기시가 붙는 이유? : 변수가 담는것이 DOM elements를 읽는 것임을 표시한다.
e.preventDefault()
- 1)
e.preventDefault(): 브라우저의 기본 동작을 막는다. 새로고침되는 것을 방지한다.
이벤트 캡쳐링, 버블링
-
js 이벤트는 상하 관계 요소들에 전파된다.
-
addEventListener의 세번째 매개변수는 어떤 방식으로 이벤트를 전파할지 결정한다. 기본값은 false이고 false일때 bubbling방식으로 전파된다.
[이벤트 버블링(Event Bubbling)]
- 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작 -> 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상
[이벤트 캡처링(Event Capturing)]
- 캡처링은 버블링과는 반대로 부모 요소에서부터 자식 요소로 이벤트를 내려간다.
이벤트 전파 막기
- event.preventDefault(): 이벤트 자체의 고유동작을 중단시킨다.
- event.stopPropagation(): 이벤트의 전파를 중단시킨다. 버블링의 경우 클릭한 타켓에만 이벤트 발생하고 상위 요소로 이벤트가 전파되는 것을 막는다.
2) new FormData()
- FormData란 ajax로 form data 전송을 가능하게 해주는 객체이다.
- html form태그를 이용해서 input값을 서버에 전송하지만, formDate를 이용해서 스크립트로 전송할 수 있다.
const formRecords = Array.from(new FormData($formTag))
- FormData을 통해서 formTag의 데이터를 전부 가져온다.
- 가져온 데이터를 배열형태로 변경 후 식별자 formRecords에 할당시킨다.
- 왜 배열로 가져옴? 벨리데이션에서 레코드 길이값과 비교 후 form 작성여부를 판단한다.
3) validation
- 선택, 입력값이 완성됐는지의 여부를 확인한다.
- 모든 input은 입력이 있기에 validation 검사를 해야한다.
if(Object.keys(formMap).length !== formRecords.length){ $currentItem.innerHTML = '선택사항을 클릭해주세요.' return}
- formMap의 key값의 lenght와 FormData로 배열로 만들어준 formRecord의 lenght값을 비교한다.
- 만약 해당 길이가 같지 않을 경우에는 라디오버튼이 선택되지 않은것.
- 경고참과 함께 바로 return해준다.
4) 현재값 배열 출력 map
- record[0]에 formap 객체에 있는 contact, delivery값이 있다.
- map 안의 record 값은 배열의 배열로 넘어오게 된다.
- 배열에 join('
') 메서드 사용
비니로그 쳌킨