해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.
이번 포스팅에서는 폼과 관련된 이벤트 타입을 알아보도록 하겠습니다.
자바스크립트 기본 문법 :: submit
submit 은 폼의 정보를 서버로 전송하는 명령인 submit 시에 발생합니다.
form 태그에 적용됩니다.
아래 예제는 전송 전에 텍스트 필드에 값이 입력 되었는지를 확인하는 예제입니다.
만약 값이 입력되지 않았다면 전송을 중단하도록 동작합니다.
<form id="target" action="result.html">
<label for="name">name</label> <input id="name" type="name" />
<input type="submit" />
</form>
<script>
var t = document.getElementById('target');
t.addEventListener('submit', function(event){
if(document.getElementById('name').value.length === 0){
alert('Name 필드의 값이 누락 되었습니다');
event.preventDefault();
}
});
</script>
name 이라는 id 를 가진 태그의 값이 아무것도 없을 때,
위 그림과 같이 Name 필드의 값이 누락되었다는 메시지와 함께 submit 이 중단됩니다.
event.preventDefault();
위 구문은 바로 전 포스팅인 기본 동작을 취소하는 명령입니다.
자바스크립트 기본 문법 :: change
change는 폼 컨트롤의 값이 변경 되었을 때 발생하는 이벤트입니다.
input(text,radio,checkbox), textarea, select 태그에 적용되는 이벤트입니다.
<p id="result"></p>
<input id="target" type="name" />
<script>
var t = document.getElementById('target');
t.addEventListener('change', function(event){
document.getElementById('result').innerHTML=event.target.value;
});
</script>
이렇게 입력창에 입력하고 포커싱을 다른 곳으로 옮기면
입력한 값이 그대로 p 태그 안에 텍스트로 자리잡게 됩니다.
자바스크립트 기본 문법 :: blur, focus
focus는 엘리먼트에 포커스가 생겼을 때, blur은 포커스가 사라졌을 때 발생하는 이벤트입니다.
다음 태그를 제외한 모든 태그에서 발생합니다.
<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, <title>
<input id="target" type="name" />
<script>
var t = document.getElementById('target');
t.addEventListener('blur', function(event){
alert('blur');
});
t.addEventListener('focus', function(event){
alert('focus');
});
</script>
input 태그를 클릭하면 아래 그림과 같이 focus 라는 경고창이 출력됩니다.
input 태그의 포커싱을 해제하면 아래와 같이 blur 라는 경고창이 출력됩니다.
이번 포스팅은 이렇게 form 태그에서 발생하는 이벤트들을 알아봤습니다.