JavaScript로 자주 사용하는 이벤트 핸들러를 구현해 본다. 페이지 로딩 시, 문서에서 기본키 설정 시, 마우스에 대한 처리를 예제로 구현해 보았다. 발생한 이벤트 이름과 값을 화면에 표시한다.
▣ EventHandler1.html
<html>
<head>
<title>Event Handler [1]</title>
<style>
body, td {
font-family:verdana;
font-size:12px;
}
</style>
<script language="javascript">
function win_onLoad()
{
document.getElementById('event_name').innerHTML = "Window.onLoad. *^^*";
document.getElementById('evnet_value').innerHTML = "Hello JavaScript. *^^*";
}
function doc_onClick()
{
var e = window.event.srcElement
document.getElementById('event_name').innerHTML = "Document.onClick. *^^*";
document.getElementById('evnet_value').innerHTML = e.tagName + ", " + e.type;
}
function doc_onDblClick()
{
document.getElementById('event_name').innerHTML = "Document.onDblClick. *^^*";
document.getElementById('evnet_value').innerHTML = "x=" + event.x + ", y=" + event.y;
}
function doc_onKeyDown()
{
if(event.keyCode == 13)
{
document.getElementById('event_name').innerHTML = "Document.onKeyDown. *^^*";
document.getElementById('evnet_value').innerHTML = "Enter Key. *^^*";
}
else if(event.keyCode == 27)
{
document.getElementById('event_name').innerHTML = "Document.onKeyDown. *^^*";
document.getElementById('evnet_value').innerHTML = "Esc Key. *^^*";
}
}
</script>
<script language="javascript">
window.onload = win_onLoad;
document.onclick = doc_onClick;
document.ondblclick = doc_onDblClick;
document.onkeydown = doc_onKeyDown;
</script>
</head>
<body>
<table width="450" border="1" cellspacing="0" cellpadding="1" bordercolorlight="#E0E0E0" bordercolordark="#FFFFFF">
<tr style="background-color:#FFFFCC">
<td width="150"><div align="center">항목</div></td>
<td width="300"><div align="center">값</div></td>
</tr>
<tr>
<td><div align="center">이벤트명</div></td>
<td> <span id="event_name">*^^*</span></td>
</tr>
<tr>
<td><div align="center">이벤트값</div></td>
<td> <span id="evnet_value">*^^*</span></td>
</tr>
</table>
</body>
</html>▣ 페이지 로드
▣ 마우스 클릭
▣ 마우스 더블클릭
▣ 엔터키 (Enter)
▣ 취소키 (Esc)
728x90
'■ Front-End ■ > JavaScript' 카테고리의 다른 글
| [JavaScript] 정규표현식 입력검증 (0) | 2023.02.28 |
|---|---|
| [JavaScript] 모달창에 값 주고 받기 (0) | 2023.02.28 |
| [JavaScript] 동적으로 테이블 생성 (0) | 2023.02.28 |
| [JavaScript] 이벤트 핸들러 [2] (1) | 2023.02.28 |
| [JavaScript] 서브메뉴 동적표시 (SubMenu.html) (0) | 2023.02.28 |
댓글