[JavaScript] Event_02

최은서·2023년 11월 9일
JavaScript

자바스크립트(JavaScript)

목록 보기
15/18

7. key

이벤트 이름			설명								발생 순서
keydown			키보드가 눌러질 때 발생						1
keypress		글자가 입력될 때 발생(한글로 사용할 수 없음)		2
keyup			키보드가 떼어질 때 발생						3
<title>key 이벤트</title>
<!-- 댓글 작성 시에 많이 이용하는 이벤트 -->
<script type="text/javascript">
window.onload=function(){
	//이벤트 연결
	document.getElementById('content').onkeyup=function(){
		//입력한 글자 수
		let inputLength = this.value.length; //이벤트가 발생한 textarea 태그
		//남은 글자 수를 구함
		let remain = 150 - inputLength;
		
		//문서 객체에 반영
		let letter = document.getElementById('letter');
		letter.innerHTML = remain;
	};
};
</script>
</head>
<body>
<h4 id="letter">150</h4>
<textarea rows="5" cols="30" name="content" id="content"></textarea>
</body>
</html>

8. isNaN

<title>isNaN함수 활용</title>
<script type="text/javascript">
window.onload=function(){
	//이벤트 연결
	document.getElementById('check_age').onclick=function(){
		let age = document.getElementById('age');
		//앞,뒤 공백 제거를 위해 trim() 메서드를 사용함
		if(age.value.trim()==''){ //입력한 데이터가 없거나 공백만 입력한 경우
			alert('나이를 입력하세요!');
			age.value = ''; //공백이 있다면 공백을 제거
			age.focus();
			return; //이벤트 핸들러를 빠져나감(submit이 아닌 경우에)
		}
		if(isNaN(age.value)){ //숫자가 아닌 경우
			alert('숫자만 입력 가능합니다!');
			age.value = '';
			age.focus();
			return;
		}
		
		alert('나이는 ' + age.value + '살입니다.');
		
	};
};
</script>
</head>
<body>
<form>
	<input type="text" name="age" id="age" size="20">
	<input type="button" value="나이 확인" id="check_age">
</form>
</body>
</html>

9. submit

<title>submit 이벤트</title>
<script type="text/javascript">
window.onload=function(){
	document.getElementById('register_form').onsubmit=function(){
		let name = document.getElementById('name');
		if(name.value.trim()==''){ //이름을 입력하지 않았거나 공백만 입력한 경우
			alert('이름을 입력하세요');
			name.value = ''; //공백이 있을 경우 제거
			name.focus();
			return false; //데이터가 서버로 전송되지 않도록 명시
		}
		let id = document.getElementById('id');
		if(id.value.trim()==''){ //아이디를 입력하지 않았거나 공백만 입력한 경우
			alert('아이디를 입력하세요');
			id.value = '';
			id.focus();
			return false;
		}
		let password = document.getElementById('password');
		if(password.value.trim()==''){ //비밀번호를 입력하지 않았거나 공백만 입력한 경우
			alert('비밀번호를 입력하세요');
			password.value = '';
			password.focus();
			return false;
		}
	};
};
</script>
</head>
<body>
<form id="register_form" action="a.jsp" method="post">
	<fieldset>
		<legend>회원가입</legend>
		<ul>
			<li>
				<label for="name">이름</label>
				<input type="text" name="name" id="name" size="10" maxlength="10">
			</li>
			<li>
				<label for="id">아이디</label>
				<input type="text" name="id" id="id" size="10" maxlength="10">
			</li>
			<li>
				<label for="password">비밀번호</label>
				<input type="password" name="password" id="password" size="10" maxlength="10">
			</li>
		</ul>
		<div align="center">
			<input type="submit" value="전송">
		</div>
	</fieldset>
</form>
</body>
</html>
<meta charset="UTF-8">
<title>갤러리</title>
<style type="text/css">
*{
	margin:0;
	padding:0;
}
#galleryWrap{
	width:520px;
	margin:0 auto;
	text-align:center;
}
#galleryWrap img{
	vertical-align:middle;
}
img#prev, img#next{
	cursor:pointer;
}
</style>
<script type="text/javascript">
window.onload=function(){
	let num = 1;
	let gallery = document.getElementById('gallery');
	//이벤트 연결
	document.getElementById('prev').onclick=function(){
		num--;
		if(num<1) num=7;
		gallery.src = '../files/img' + num + '.jpg';
	};
	document.getElementById('next').onclick=function(){
		num++;
		if(num>7) num=1;
		gallery.src = '../files/img' + num + '.jpg';
	};
};
</script>
</head>
<body>
<div id="galleryWrap">
	<h1>이미지 넘기기</h1>
	<p>
		<img src="../files/left_btn.png" alt="이전 그림 보기" id="prev">
		<img src="../files/img1.jpg" alt="갤러리 그림" id="gallery">
		<img src="../files/right_btn.png" alt="다음 그림 보기" id="next">
	</p>
</div>
</body>
</html>

11.default

<title>기본 이벤트</title>
<script type="text/javascript">
window.onload=function(){
	//이벤트 연결
	document.getElementById('alink').onclick=function(){
		alert('이벤트 연결');
		//기본 이벤트 제거
		return false;
	};
	document.getElementById('myForm').onsubmit=function(){
		let name = document.getElementById('name');
		alert(name.value);
		//기본 이벤트 제거
		return false; //서버로 전송하지 않음
	};
};
</script>
</head>
<body>
<a id="alink" href="https://www.daum.net">이동</a><br><br>

<form id="myForm" action="a.jsp" method="post">
	이름 <input type="text" name="name" id="name">
	<input type="submit" value="전송">
</form>
</body>
</html>

12. propagation

이벤트 전파(전달) : 특정 태그에 이벤트가 발생하면 다른 태그로 이벤트가 전달되는 현상

이벤트 버블링 : 자식 노드에서 부모 노드 순으로 이벤트를 실행하는 것을 의미
	div
	 |
	div			^ 자식 노드에서 부모 노드로 이벤트 전파
	 |			|
	 p			|
	 |			|
	span <-- 이벤트 발생
	
이벤트 캡쳐링 : 부모 노드에서 자식 노드 순으로 이벤트를 실행하는 것을 의미(요즘 지원하지는 않음)
<title>이벤트 전달</title>
<script type="text/javascript">
window.onload=function(){
	//이벤트 연결
	document.getElementById('space').onclick=function(){
		alert('space');
		this.style.backgroundColor='pink';
	};
	document.getElementById('paragraph').onclick=function(event){ //이벤트 객체가 전달됨
		alert('paragraph');
		this.style.backgroundColor='yellow';
		
		//이벤트 전파 차단
		event.stopPropagation();
	};
};
</script>
</head>
<body>
	<div id="space">Space
		<p id="paragraph">Paragraph</p>
	</div>
</body>
</html>

13. level2

[DOM Level2 표준 이벤트 모델]
addEventListener(eventType,eventHandler,useCapture) : 이벤트 연결
removeEventListener(eventType,eventHandler) : 이벤트 제거
<title>표준 이벤트 모델</title>
<script type="text/javascript">

window.addEventListener('load',function(){
	let header = document.getElementById('header');
	//이벤트 연결
	header.addEventListener('click',function(){
		alert('CLICK');
	},false);
},false);

</script>
</head>
<body>
	<h1 id="header">Click</h1>
</body>
</html>
profile
최은서
이전 포스트

[JavaScript] Event_01

다음 포스트

[JavaScript] Event_실습

0개의 댓글