웹브라우저 자바스크립트 - 이벤트 타입, 폼
이벤트 타입이란 이벤트의 종류이다.
웹브라우저는 많은 종류의 이벤트 타입을 제공하고 있다.
폼이라는 이벤트 타입이 있다.
폼은 사용자가 입력한 정보를 서버로 전송할 때 사용하는 html태그이다.
submit - 폼에 사용자가 어떤 정보를 입력하고 정보를 서버로 전송할 때 발생하는 이벤트
<!DOCTYPE html>
<html>
<body>
<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(); //event객체가 가지고 있는 메소드를 호출하면서 submit이 발생할 때 생기는 기본동작을 막는다.
}
});
</script>
</body>
</html>
change - 폼 태그의 value값이 바뀔 때 발생하는 이벤트
입력창에 사용자가 텍스트를 입력하고 마우스 포인트를 입력창 밖으로 빠져나왔을 때 addEventListener이 발생한다.
<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; //event.target은 이벤트가 발생한 input엘리먼트이다.
});
</script>
blur, focus
<input id="target" type="name" />
<script>
var t = document.getElementById('target');
t.addEventListener('blur', function(event){ //blur이벤트는 텍스트창 밖으로 마우스포인트를 클릭하면 경고창이 뜬다.
alert('blur');
});
t.addEventListener('focus', function(event){ //focus이벤트는 텍스트창에 마우스포인트를 클릭하면 경고창이 뜬다.
alert('focus');
});
</script>