입력 양식 이벤트 종류
- change : 입력 양식의 내용을 변경할 때 발생
- focus : 입력 양식에 초점을 맞추면 발생
- focusin : 입력 양식에 초점이 맞추어지기 바로 전에 발생
- focusout : 입력 양식에 초점이 사라지기 바로 전에 발생
- blur : 입력 양식에 초점이 사라지면 발생
- select : 입력 양식을 선택할 때 발생 (input[type="text"] 태그 및 textarea 태그 제외)
- submit : submit 버튼을 누르면 발생
- reset : reset 버튼을 누르면 발생
submit 이벤트
<body>
<form id="my-form">
<table>
<tr>
<td>이름 : </td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td>비밀번호 : </td>
<td><input type="password" name="password" id="password"></td>
</tr>
</table>
<input type="submit" value="제출">
</form>
</body>
submit 이벤트는 form 태그에서 발생하는 이벤트이다 따라서 form 객체에 submit( ) 메서드를 연결한다
입력 양식의 유효성 검사를 할 때는 기본 이벤트를 제거해야 한다
$(function () {
$('#my-form').submit(function (event) {
var name = $('#name').val();
var password = $('#password').val();
alert(name + " : " + password);
event.preventDefault();
})
});
checkbox 이벤트
type 속성이 checkbox와 radio인 input 태그의 상태를 변경하는 이벤트는 click 이벤트가 아니라 change 이벤트이다
<body>
<input type="checkbox" id="all-check" />
<label>All</label>
<div id="check-item">
<input type="checkbox" />
<label>A Option</label>
<input type="checkbox" />
<label>B Option</label>
<input type="checkbox" />
<label>C Option</label>
</div>
</body>
$(function () {
$('#all-check').change(function () {
if (this.checked) {
$('#check-item').children().prop('checked', true);
} else {
$('#check-item').children().prop('checked', false);
}
})
});
체크 상태를 확인할 때는 입력 객체의 checked 속성을 확인하고 체크 상태를 바꿀 때는 prop( ) 메서드를 사용한다
prop( ) 메서드는 이 경우에만 사용하므로 간단하게 짚고 넘어가자
화살표 함수와 jQuery 이벤트
function( ) { } 형태로 생성한 함수와 ( ) => { } 형태로 생성한 함수는 this 사용할 때만 주의하면 된다
이벤트를 연결할 때 이벤트 내부에서 this 키워드를 많이 사용하므로 단순하게 ( ) => { } 형태로 변경하면 문제가 발생한다
$('h1').click(() => {
$(this).css('color', 'red');
})
위처럼 코드를 쓰면 의도한대로 동작하지 않는다
this가 window 객체를 나타내기 때문
$('h1').click((event) => {
$(event.currentTarget).css('color', 'red');
})
화살표 함수를 이용할 때는 이벤트 객체의 currentTarget 속성을 사용해야 한다
'Frontend > jQuery' 카테고리의 다른 글
| JS jQuery (part. 33) - 사용자 정의 효과 (0) | 2020.08.13 |
|---|---|
| JS jQuery (part. 32) - 기본 시각 효과 (0) | 2020.08.13 |
| JS jQuery (part. 30) - 윈도우 이벤트 (0) | 2020.08.12 |
| JS jQuery (part. 29) - 키보드 이벤트 (0) | 2020.08.12 |
| JS jQuery (part. 28) - 마우스 이벤트 (0) | 2020.08.11 |
