<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onmouseover과 onmouseout</title>
<script>
var text=["빨간자전거를 타고 서울, 대전, 대구, 부산 찍고, 목포, 인천을 거쳐 달린다",
"한국 고전 50권, 외국 고전 50권을 읽는 목표",
"아침에는 수영을 배우고, 점심먹고 자전거 훈련 30KM, 저녁에는 10KM 달리기 하기",
"문제가 많고 잘 정리된 자바스크립트 책을 구입하여 본격적으로 연습문제 풀기"];
var commentDiv;
function init() {
commentDiv = document.getElementById("commentDiv");
var liArray = document.getElementsByTagName("li");
for(i=0; i<liArray.length; i++) {
liArray[i].addEventListener("mouseover", over, false);
liArray[i].addEventListener("mouseout", hideCommentDiv, false);
}
}
function over(e) {
var n=0;
switch(e.target.id) {
case "l0" : n = 0; break;
case "l1" : n = 1; break;
case "l2" : n = 2; break;
case "l3" : n = 3; break;
}
setCommentDiv(text[n], e);
}
function setCommentDiv(comment, e) {
commentDiv.innerHTML = comment;
commentDiv.style.left = e.clientX + "px"; //여기서 왜 clientX로 한것이죠? offsetX가 맞지않나요?? 그리고 left의 기준이 어디서부터 왼쪽방향으로 얼마만큼 떨어져있는지 기준이 궁금합니다
commentDiv.style.top = e.clientY + "px"; //여기도 왜 clientY인지, top은 어디를 기준으로 몇픽셀떨어져있는것을 의미하는지 여쭤보고싶습니다.
commentDiv.style.border = "1px solid yellowgreen";
commentDiv.style.background = "aliceblue";
commentDiv.style.visibility = "visible";
}
function hideCommentDiv() {
commentDiv.style.visibility = "hidden";
}
</script>
</head>
<body onload="init()">
<h3>아이템에 마우스를 올리면 설명 출력</h3>
<hr>
<p>여름 방학 때 하고 싶은 것들</p>
<ul>
<li id="l0">자전거로 대한민국 일주</li>
<li id="l1">책 100권 읽기</li>
<li id="l2">철인 3종 경기 준비</li>
<li id="l3">자바스크립트 정복</li>
</ul>
<div id="commentDiv" style="position:absolute"></div>
</body>
</html>
만일 이 값이 e.clientX , e.clientY 100, 200 이라면 이것은 현재 마우스 커서기가 있는 위치가 문서가 출력된 윈도우의 왼쪽 상단 모서리를 0, 0 으로 봤을 때의 상대거리로 100, 200 떨어져 있는 위치입니다.
마우스가 있는 바로 그 위치인겁니다.
그런데 e.offsetX , e.offsetY 는 이벤트가 발생한 객체 li를 기준으로 (li의 위치를 0,0으로 봤을 때) 계산된 값입니다.
그러므로 현재 마우스가 있는 곳에 div 객 체를 출력하려면 e.clientX , e.clientY를 사용해야겠지요.
그리고 left, top은 객체의 pisition ㅇ리라는 배치 종류에 따라 달라질 수 있습니다. (217페이지 참고)
보통의 경우 left는 문서가 출력된 영역의 왼쪽 끝이 0인 상대값이고, top은 최상단을 0으로 한 상대값입니다.