: html문서 내부에 존재하는 자바스크립트 코드는 브라우저 내에서 이벤트구동(event-driven)방식으로 작동한다.
: 이벤트란 브라우저의 사용자가 취한 액션을 의미한다. 즉 마우스클릭이나 이동, 키보드입력, 버튼클릭 등의 행위를 의미한다.
: 이벤트 핸들러는 이벤트의 발생시 처리하기 위해 작성된 자바스크립트 코드이다.
- EventTest.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body onLoad = window.open() onBlur = "document.bgColor = 'blue'" onFocus = "document.bgColor='red'">
<h3> 포커스를 받으면 빨간색, 잃으면 파란색 배경으로 변합니다. </h3>
</body>
</html>
- 결과
- EventTest2.html 소스
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<script type = "text/javascript">
function blurtest(){
var data = document.form.id.value;
if(data.length < 1){
alert("아이디가 다 채워지지 않았습니다.")
document.form.id.focus(); // 초점을 id로 맞춤
}
else{
document.form.pass.focus(); // 초점을 pass로 맞춤
}
}
</script>
<!-- id부터 포커스가 맞춰져 있도록 설정 -->
<body>
<h3> 포커스를 받을 때 이벤트 발생 </h3>
<form name = "form">
<!-- onBlur는 입력양식 필드에서 포커스를 잃어 버렸을 때 발생하는 이벤트를 말함. -->
아이디 : <input type = "text" name = "id" onBlur="blurtest()"> <br><br>
패스워드 : <input type = "password" name = "pass"> <br><br>
</form>
</body>
</html>
- 결과
