728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 종류</title>
<script type="text/javascript">
/*
이벤트 : 사용자가 특정적인 행위를 하였을때 발동시키는 이벤트
이벤트 사용하기 - on이라는 속성, document.addEventListener 메서드 사용
click - 사용자가 어떤 특정 객체를 클릭했을 경우
*/
</script>
</head>
<body>
<button type="button" id ="myBtn">클릭 이벤트</button>
<input type="text" name = "memberName" onkeypress="myKeypress(this)">
<input type="text" name = "memberAge" id = "myKeydown">
<select id = "mySelect">
<option value=""> :: 선택 :: </option>
<option value="전주"> 전주 </option>
<option value="군산"> 군산 </option>
</select>
<script type="text/javascript">
var myBtn = document.getElementById('myBtn');
myBtn.addEventListener('click',function(){
console.log('클릭이벤트');
});
var myKeypress = function(obj) {
console.log('키보드 이벤트 발동',obj.value);
}
var mySelect = document.getElementById('mySelect');
myBtn.addEventListener('change',function(){
console.log('체인지 이벤트 발동',this.value);
});
var myKeydown = document.getElementById('myKeydown');
myKeydown.addEventListener('keydown',function(){
console.log('키다운 이벤트 발동',this.value);
if(this.value.length >10){
alert('10글자 이하로 입력해주세요.');
return;
}
});
/* 위와 동일하지만 함수를 밖으로 빼서 작업하기
var myKeydown = document.getElementById('myKeydown');
var keyEv = function () {
console.log('키다운 이벤트 발동',this.value);
if(this.value.length >10){
alert('10글자 이하로 입력해주세요.');
return;
}
};
myKeydown.addEventListener('keydown',keyEv); */
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>유효성 검사</title>
</head>
<body>
<form id= "memberForm" action="./dom03.html" method="post">
<input type="text" name ="memberName">
<input type="text" name ="memberAge">
<button type="button" id="memberInfoCheck">전송</button>
</form>
<script type="text/javascript">
var evBtn = document.getElementById('memberInfoCheck');
evBtn.addEventListener('click', function() {
var form = document.getElementById('memberForm');
var memberName = form.memberName;
var memberAge = form.memberAge;
if(memberName.value == ''){
alert('회원명을 입력해주세요.');
memberName.focus();
return;
}
if(memberAge.value == ''){
alert('회원 나이을 입력해주세요.');
memberAge.focus();
return;
}
form.submit();
});
</script>
</body>
</html>반응형
'[YERIEL] 개발일기' 카테고리의 다른 글
| 오늘의 키워드 정리 (1) | 2020.07.01 |
|---|---|
| URL과 URI 차이 (0) | 2020.05.14 |
| eclipse Export & Import (0) | 2020.03.09 |
| eclipse Server setting & Web browse setting 하기 (0) | 2020.03.07 |
| eclipse workspace setting 하기 (0) | 2020.03.05 |
댓글