JavaScript로 자주 사용하는 이벤트 핸들러를 구현해 본다. 페이지 로딩 시, 문서에서 기본키 설정 시, 마우스에 대한 처리를 예제로 구현해 보았다.
▣ EventHandler2.html
<html>
<head>
<title>Event Handler [2]</title>
<meta name="subject" content="throw new *^^*;">
<meta name="title" content="Event Handler">
<meta name="author" content="agapeuni">
<meta name="keywords" content="event, handler">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
body, td {
font-family:verdana;
font-size:12px;
}
</style>
<script for="txt_test" event="onkeyup">
document.getElementById('event_name').innerHTML = "txt_test.onkeyup. *^^*";
document.getElementById('evnet_value').innerHTML = this.value;
</script>
<script for="chk_test" event="onclick">
document.getElementById('event_name').innerHTML = "chk_test.onclick. *^^*";
document.getElementById('evnet_value').innerHTML = this.value;
</script>
<script for="rdo_test" event="onclick">
document.getElementById('event_name').innerHTML = "rdo_test.onclick. *^^*";
document.getElementById('evnet_value').innerHTML = this.value;
</script>
<script for="sel_test" event="onchange">
document.getElementById('event_name').innerHTML = "sel_test.onchange. *^^*";
document.getElementById('evnet_value').innerHTML = this.value;
</script>
<script for="btn_test" event="onclick">
document.getElementById('event_name').innerHTML = "btn_test.onclick. *^^*";
document.getElementById('evnet_value').innerHTML = this.value;
</script>
</head>
<body>
<form name="mainForm" method="post" autocomplete="off">
<fieldset>
<legend><b>이벤트 대상</b></legend>
<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="right">Text</div></td>
<td>
<!-- 텍스트 : 실험 -->
<input name="txt_test" type="text" value="text" size="20" maxlength="20" style="ime-mode:disabled;">
</td>
</tr>
<tr>
<td><div align="right">Checkbox</div></td>
<td>
<!-- 체크박스 : 실험 -->
<input type="checkbox" name="chk_test" id="chk_test_all" value="all">all
<input type="checkbox" name="chk_test" value="yes" checked>yes
<input type="checkbox" name="chk_test" value="no">no
</td>
</tr>
<tr>
<td><div align="right">Radio</div></td>
<td>
<!-- 라디오 : 실험 -->
<input type="radio" name="rdo_test" id="rdo_test_all" value="all">all
<input type="radio" name="rdo_test" value="yes">yes
<input type="radio" name="rdo_test" value="no" checked>no
</td>
</tr>
<tr>
<td><div align="right">Select</div></td>
<td>
<!-- 콤보박스 : 실험 -->
<select name="sel_test">
<option value="All">All</opsion>
<optgroup label="Yes/No">
<option value="Yes" selected>Yes</opsion>
<option value="No">No</opsion>
</optgroup>
</select>
</td>
</tr>
<tr>
<td><div align="right">Button</div></td>
<td>
<!-- 버튼 : 실험 -->
<input name="btn_test" type="button" value="Button">
</td>
</tr>
<tr>
<td><div align="right">Label</div></td>
<td>
<!-- 버튼 : 실험 -->
<label for="chk_test_all">Checkbox All</label><br>
<label for="rdo_test_all">Radio All</label><br>
</td>
</tr>
</table>
</fieldset>
<br>
<br>
<fieldset>
<legend><b>이벤트 현황</b></legend>
<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>
</fieldset>
</form>
</body>
</html>
▣ 페이지 로드
▣ Text 입력
▣ Checkbox 선택
▣ Radio 선택
▣ Select 선택
▣ Button 클릭
728x90
'■ Front-End ■ > JavaScript' 카테고리의 다른 글
| [JavaScript] 정규표현식 입력검증 (0) | 2023.02.28 |
|---|---|
| [JavaScript] 모달창에 값 주고 받기 (0) | 2023.02.28 |
| [JavaScript] 동적으로 테이블 생성 (0) | 2023.02.28 |
| [JavaScript] 이벤트 핸들러 [1] (0) | 2023.02.28 |
| [JavaScript] 서브메뉴 동적표시 (SubMenu.html) (0) | 2023.02.28 |
댓글