이벤트 종류
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var win =null;
function openWin(){
// var url = "images/a.jpg";
// win = window.open(url,"PopupWin","width=400, height=400");
}
function closeWin(){
if(win!=null){
win.close();
win=null;
}
}
function checkPwd(obj){
// alert(obj);
var pwd= obj.value;
var msg=document.getElementById('pwdMsg');
if(pwd.length>=4 && pwd.length<=6){
//4자이상 6자 이내
//msg.style.visibility='hidden';
msg.style.display='none';
}else{
//msg.style.visibility="";
msg.style.display='';
obj.focus();
}
}
function en(){
var obj1 = document.getElementById("name");
obj1.style.backgroundColor='yellow';
}
function le(){
var obj2 = document.getElementById("name");
obj2.style.backgroundColor='';
}
</script>
<style>
#pwdMsg{
color: red;
}
</style>
</head>
<body onload="openWin()" onunload="alert('잘가');closeWin();">
<!--onload: 로드될 때 unload: 언로드 될 때-->
<h1>이벤트 처리</h1>
<!--onfocus: 입력 포커스가 온 경우
onblur : 입력 포커스가 옮겨진 경우
onchange : 입력 필드값을 변경할 때
oninput : 입력할 때-->
아이디 : <input type="text" name="userid" id="userid"
onfocus="this.style.border='3px dashed tomato'"
onblur="this.style.border=''"
onchange="document.bgColor='#bb33ee'"
oninput="console.log('input')"><p></p>
비밀번호 : <input type="password" name="passwd" id="passwd" onchange="checkPwd(this)"><br><p id="pwdMsg">비밀번호는 4자이상 6자 이내여야 한다.</p>
이름 : <input type="text" name="name" id="name"
onkeydown="console.log('keydown')" onkeypress="console.log('keypress')" onkeyup="console.log('keyup')"
onmouseenter="en()" onmouseleave="le()"><p></p>
<!--onkeydown : 키를 누를 때 (모든 키를 인식함) onkeypress : 타이핑할때 (shift,ctrl키는 인식 못함) onkeyup : 키를 눌렀다 땔때
onmouseenter : 마우스가 영역 안데 들어 올 때 onmouseleave : 마우스가 영역 밖으로 나갈 때-->
<!--실습 이름 텍스트 박스 안에 들어오면 배경생을 yellow 밖으로 나가면 원래색으로 돌아오도록-->
<hr color="blue">
<table style="width:80%; border:1px solid darkblue; margin: auto;">
<tr>
<td width="33%" style="border-right: 1px solid darkcyan" onclick="this.style.backgroundColor='orange'">클릭</td>
<td width="33%" style="border-right: 1px solid darkcyan" ondblclick="this.style.backgroundColor='#66ccdd'">더블클릭</td>
<td width="33%" >
<textarea rows="7" cols="20" onselect="this.style.border='thick dotted tomato'">이곳에 쓴 내용을 select하세요</textarea>
</td>
</tr>
</table>
</body>
</html>이벤트 처리
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ex31event.html</title>
</head>
<body>
<h1 id='e1' onclick="alert('hello')">이벤트 테스트1</h1>
<h1 id='e2'>이벤트 테스트2</h1>
<h1 id='e3'>이벤트 테스트3</h1>
<script>
//event 처리 방법
//1) 태그 내에 이번트 핸들러를 기술하는 방법
//2) addEventListener('이벤트 종류','이벤트핸들러(함수)')를 이용해 이벤트 핸들러를 등록하는 방법
var obj=document.getElementById('e2');
obj.addEventListener('mouseover',function(){
this.style.color='blue';
this.style.fontSize='28pt';
})
obj.addEventListener('mouseout',function(){
this.style.color='';
this.style.fontSize='';
})
//3) 리터럴 방식의 이벤트 처리
var obj2=document.getElementById('e3');
obj2.onclick=function(){
this.style.border='thick skyblue dashed';
this.style.padding='8px';
}
obj2.ondblclick=function(){
this.style.border='';
this.style.padding='';
}
</script>
</body>
</html>
'개발자 > 국비지원 SW' 카테고리의 다른 글
| 국비지원 50일차 - JSP(Tomcat) 환경설정, server에서 class파일, GET방식 (0) | 2020.06.24 |
|---|---|
| 국비지원 49일차 - UML, Use Case specification, JavaScript Date객체, 달력 (0) | 2020.06.23 |
| 국비지원 47일차 - JTextPane, JavaScript Math객체, 가위바위보 (0) | 2020.06.19 |
| 국비지원 46일차 - form태그, html먼저 실행 후 script (0) | 2020.06.18 |
| 국비지원 45일차 - 채팅앱(콘솔, GUI), JavaScript (0) | 2020.06.17 |