티스토리 뷰
각각의 기능을 실행하면 입력한 메시지가 출력되며 모달 창이 뜬다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js</title>
<script type="text/javascript">
function fun1() {
alert("메시지 출력");
}
function fun2() {
alert("더블클릭 메시지 출력")
}
function fun3() {
alert("마우스오버 메시지 출력")
}
function fun4() {
alert("텍스트 상자 포커스(해제)")
}
function fun5() {
alert("키를 눌렀다 놓았을때")
}
function fun6() {
alert("문서를 불러왔을 때")
}
function fun7() {
alert("목록 선택 변경")
}
</script>
</head>
<body onload="fun6()">
<!-- 어떤종류의 이벤트가 있는지 -->
<input type="button" value="클릭" onclick="fun1()">
<input type="button" value="더블클릭" ondblclick="fun2()">
<input type="button" value="마우스오버" onmouseover="fun3()">
<input type="text" name="tx" onfocus="fun4()">
<input type="text" name="tx" onblur="fun4()">
<input type="text" name="tx2" onkeyup="fun5()">
<select onchange="fun7()">
<option>목록1</option>
<option>목록2</option>
<option>목록3</option>
</select>
</body>
</html>onclick : 클릭
ondbclick : 더블클릭
onmouseover : 마우스오버
onfocus : 텍스트 상자에 포커스
onblur : 텍스트 상자에 포커스 해제(실행된 채 진행이 어려워서 실제로는주석처리하여 사용했다)
onkeyup : 키를 눌렀다 놓았을 때 이벤트가 발생
onload : 해당 문서를 불러오면 이벤트가 발생
oncharge : 목록 선택을 변경하였을 때 이벤트가 발생
'배운 것 기록 > web' 카테고리의 다른 글
| [html] html5 추가 input 속성 (0) | 2022.05.23 |
|---|---|
| [html] form 태그 종류 (0) | 2022.05.16 |
| [js] 내장객체 입력, 목록 (0) | 2022.05.11 |
| [html] 테이블 셀 합치기 (0) | 2022.05.09 |
| [js] 객체 (0) | 2022.05.08 |
댓글