♥ 이벤트(Event)는 웹 페이지에서 수행하는 동작을 의미하는데 가령 [저장] 버튼을 클릭하는 것을 이벤트라고 말한다.
♥ 이밴트핸들러(EventHandler)는 이벤트가 발생했을 경우 처리하는 코드를 의미한다. 즉 함수의 역할이라고 볼수 있다.
※ 아래표는 이벤트와 이벤트핸들러를 연결하는 이벤트핸들러 속성들이다. (주요한것만 모음)
on | blur | 포커스를 다른곳으로 옮길 경우 |
click | 링크나 폼의 구성원을 클릭할 때 |
change | 선택값을 바꿀 경우 |
focus | 포커스가 위치할 경우 |
mouseover | 마우스가 올라올 경우 |
mouseout | 마우스가 떠날 경우 |
mousedown | 마우스를 누를 경우 |
mousemove | 마우스를 움직일 경우 |
mouseup | 마우스를 눌렀다 놓을 경우 |
load | 페이지가 열릴 때 |
on | unload | 현재의 브라우저,윈도우를 떠날 때 |
keydown | 키 입력시 |
keypress | 키 누를 때 |
keyup | 키를 누르고 놓았을 때 |
예제1)
<body 온load="alert('안녕하세요.')">
예제2)
출생년도 : <select name="year" 온change="alert(this.value)" >
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
</select> <br>
예제3)
<table border="1" width="300">
<tr height="50">
<td 온mousemove="alert('100')">마우스 커서 이동 시</td>
</tr>
<tr height="50">
<td 온mouseover="alert('200')">마우스 커서 얻을 때</td>
</tr>
<tr height="50">
<td 온mouseout="alert('300')">마우스 커서 잃을 때</td>
</tr>
</table>
예제6)
<style>
td {
width:30px;
height:30px;
border:1px solid #cccccc;
}
</style>
<script>
function fn_color(color) {
document.body.style.background=color;
}
</script>
<body>
<table>
<tr>
<td bgcolor="yellow" 온mouseover="fn_color('yellow')" 온mouseout="fn_color('#ffffff')"></td>
</tr>
<tr>
<td bgcolor="pink" 온mouseover="fn_color('pink')" 온mouseout="fn_color('#ffffff')"></td>
</tr>
</table>
</body>
</html>
예제7)
<table>
<script>
var color=["00","33","66","99","cc","ff"];
for( var i=0; i<=5; i++ ) {
for( var j=0; j<=5; j++ ) {
for( var k=0; k<=5; k++ ) {
c = color[i]+color[j]+color[k];
// 000000, 000033, 000066
// 003300, 003333, 003366
document.write("<tr><td bgcolor='#"+c+"' on MouseOver=\"document.bgColor=\'#"+c+"'\">"+c+"</td></tr>");
}
}
}
</script>
</table>
(실습1)
(1) 두 입력상자를 이용하여 copy 테스트 : on ~ keypress / keyup / keydown을 실습한다.
(2) 체크 박스를 이용하여 쇼핑몰의 주소 copy 기능을 실습한다.
<style>
body {
line-height:2.0;
}
</style>
<body>
<form name="frm">
1. <input type="text" name="a1" > <br>
2. <input type="text" name="a2" 온keypress="" > (on keypress) <br>
3. <input type="text" name="a3" 온keyup=""> (on keyup) <br>
4. <input type="text" name="a4" 온keydown=""> (on keydown) <br>
<p>
기본주소 <input type="text" name="addr1" value="서울시 강남구 논현동"> <br>
<input type="checkbox" name="chk" 온click="fn_copy()"> 위 주소와 동일합니다. <br>
배송지 <input type="text" name="addr2">
</p>
</form>
</body>