<script src="../JS/jquery.min.js"></script>
<script>
$(function(){
/*
- submit() : form태그 안에서 데이터를 서버로 전송하기 직전에 호출되는 이벤트
- fom태그 안 button태그의 타입이 없거나, submit인 button을 클릭할 때 실행
- 해당버튼을 클릭하면 click이벤트 실행 후, submit 이벤트가 실행됨
- submit 이벤트는 리턴값이 false이면 서버에 데이터 전송을 안함
- form태그에서만 발생하는 이벤트
- form태그 안에 있는 정보들을 체크할 때 사용
- return값이 false이면 페이지 이동(form action에 달아놓은 키보드이벤트.html페이지로)을 안함
*/
$('form').submit(function(){
alert('전송');
return false;
});
/*
- focus() : input 태그 등이 선택되어 활성화되는 경우를 focus상태
- blur() : 포커스된 input 태그 등이 비활성화되는 경우 blur상태
*/
$('#id').focus(function(){
console.log('포커스');
});
$('#id').blur(function(){
console.log('블러');
});
/*
- change() : input/textarea/select 태그 등의 값이 바뀌는 경우
- input : 값을 입력하고 엔터 또는 다른 곳을 클릭하면 change 이벤트 발생
- 입력 완료된 input의 입력값이 이전과 비교했을 때, 내용이 변경되고 다른 곳을 클릭 또는 전송해야 동작됨
- select : 다른 값을 클릭하여 선택되면 chane 이벤트 발생
*/
$('#id').change(function(){
console.log('input 변경')
});
$('select').change(function(){
console.log('select 변경')
});
});
</script>
</head>
<body>
<form action="키보드이벤트.html">
<input type="text" id="id">
<select name="hobby">
<option value="농구">농구</option>
<option value="축구">축구</option>
</select>
<button type="submit">전송</button>
</form>
</body>