파일 목록
-
📁 이후
-
📁 jquery
-
📁 js
- ex10-1.html
- ex10-2.html
- ex10-5.html
- ex8-11.html
- Ex8-4.html
- Example8-2.html
- example9-18.html
- example9-19.html
- Examplt8-3.html
- exapmle9-21.html
- practic9-4.html
- practice 9-6.html
- practice8-1-3.html
- practice8-2.html
- practice8-3.html
- practice8-5.html
- practice8-6.html
- practice8-7.html
- practice9-1.html
- practice9-5.html
- practice9-8.html
- test6.html
- Test8.html
- test9.html
- test9_10.html
- test9_3.html
- test_9._0.html
- win1_ob2.html
- 챌린지 copy.html
-
- desktop.ini
- ex10-1,2.html
- ex10-3.html
- ex10-5.html
- Title.png
.jpg){kind=link}
.jpg){kind=link}
.jpg){kind=link}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>마우스 관련 리스너</title>
<script>
let width = 1; // 테두리 두께
function down(obj) {
obj.style.fontStyle = "italic";
}
function up(obj) {
obj.style.fontStyle = "normal";
}
function over(obj) {
obj.style.borderColor = "violet";
// 테두리 폭이 0일 때 색은 보이지 않는다.
}
function out(obj) {
obj.style.borderColor = "lightgray";
}
function wheel(e, obj) { // e는 이벤트 객체
if (e.wheelDelta < 0) { // 휠을 아래로 굴릴 때
width--; // 폭 1 감소
if (width < 0) width = 0; // 폭이 0보다 작아지지 않게
}
else // 휠을 위로 굴릴 때
width++; // 폭 1 증가
obj.style.borderStyle = "ridge";
obj.style.borderWidth = width + "px";
}
</script>
</head>
<body>
<h3>마우스 관련 이벤트 리스너</h3>
<hr>
<div>마우스 관련
<span onmousedown="down(this)" onmouseup="up(this)" onmouseover="over(this)" onmouseout="out(this)"
onwheel="wheel(event, this)" style="display:inline-block">이벤트
</span>가 발생합니다.
</div>
</body>
</html>