Front/jQuery
jQuery - 이벤트(키보드 이벤트, 입력 양식 이벤트)
by Hyeon_
2021. 12. 14.
이벤트 유형
- 윈도우 이벤트
- 입력 양식 이벤트
- 마우스 이벤트
- 키보드 이벤트
입력 양식 이벤트
입력 양식 이벤트 종류
submit : submit(전송) 버튼 눌렸을 때 발생reset : reset(취소) 버튼 눌렀을 때 발생change : 입력 양식의 내용을 변경할 때 발생 (select 입력 시)focus : 입력 양식에 커서를 놓을 때 발생blur : 입력 양식이 커서를 잃을 때 발생
입력 양식 관련메소드
- value :
val()
- focus :
focus()
- 체크 되었는 지 :
is(':checked')
입력란에서 엔터키 쳤을 때 문제
$(document).on(‘keydown’, function(){
if(e.keyCode == 13) return false;
});
e : 이벤트 발생 시 이벤트 처리 함수로 전달되는 event 객체- 함수의 매개변수로 받아서 사용
- 필요없을 때는 function() 안받으면 됨
- 이름은 임의로 사용 가능 : event로 해도 되고, a, b 해도 됨
- 일반적으로 이벤트를 의미하는 e 또는 event로 사용
$('선택자').on('change', function(){ });
selectChange.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#department').on('change', function(){
$('span').text($(this).val());
});
});
</script>
<title>Document</title>
</head>
<body>
<select id="department" name="department">
<option value="">선택하세요</option>
<option value="경영학과">경영학과</option>
<option value="산업공학과">산업공학과</option>
<option value="경제학과">경제학과</option>
<option value="전자공학과">전자공학과</option>
<option value="컴퓨터학과">컴퓨터학과</option>
</select>
<span>학과</span>
</body>
</html>
each() 메소드 사용 방법
$('선택자').each(콜백함수function(){ });$.each(배열, 콜백함수);$.each(객체, 콜백함수);
eachFunction.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('div').each(function(){
console.log($(this).text()); // 텍스트 읽어오기
});
$('div').each(function(index){
console.log($(this).text(index)); // 텍스트 출력하기
});
// 선택자 없이 $.each(배열, 콜백함수); 로 불러오기
var names = ["김준면", "김민석", "변백현", "도경수"];
$.each(names, function(index, value){
console.log(index + " : " + value);
});
// 사용자 정의 객체 생성
let car = {
no:'11가1111',
name:'소나타',
maker:'현대',
cc:2000,
year:2021
};
$.each(car, function(prop, value){
console.log(prop + " : " + value);
});
});
</script>
</head>
<body>
<div>a</div>
<div>b</div>
<div>c</div>
</body>
</html>