마우스 이벤트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- onMouseDown, onMouseUp, onMouseOver, onMouseOut - -->
<input type="image" src="./resource/san0.gif" onmousedown="mouseDown(this)" onmouseup="mouseUp(this)"
onmouseover="mouseOver(this)" onmouseout="mouseOut(this)">
<br><br>
<a href="#" onmouseover="document.box.src='./resource/surprise.gif'"
onmouseout="document.box.src='./resource/box.gif'">
<img src="./resource/box.gif" name="box" alt="">
</a>
<script>
function mouseDown(obj) {
obj.src = "./resource/san1.gif"
}
function mouseUp(obj) {
obj.src = "./resource/san0.gif"
}
//마우스 커서가 위로 갔을때
function mouseOver(obj) {
obj.src = "./resource/san2.gif"
}
//마우스 커서가 벗어났을때
function mouseOut(obj) {
obj.src = "./resource/san0.gif"
}
</script>
</body>
</html>
키보드 이벤트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="text" name="title">
<script>
/*
document.getElementsByName("title")[0].onkeydown = function (e) {
console.log("keydwon = keycode: " + e.keyCode);
}*/
document.getElementsByName("title")[0].onkeypress = function (e) {
console.log("keypress = keycode: " + e.keyCode);
}
</script>
</body>
</html>'JavaScript > javascript 기초 공부하기' 카테고리의 다른 글
| 자바스크립트 반복문 정리 (for of, for in, Object.entries,keys,values) (0) | 2020.01.19 |
|---|---|
| javascript로 css 조작하기 (0) | 2020.01.09 |
| history, location 활용하기 (0) | 2020.01.07 |
| 자바스크립트 10진법 2, 8, 16진법으로 변환하기 (0) | 2020.01.07 |
| 자바스크립트 라면 타이머 만들기 (0) | 2020.01.07 |
