<!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;
case "l4" : n = 4; break;
}
setCommentDiv(text[n], e);
}
function setCommentDiv(comment, e) {
commentDiv.innerHTML = comment;
commentDiv.style.left = e.clientX + "px";
commentDiv.style.top = e.clientY + "px" ;
commentDiv.style.border = "1px solid yellowgreen" ;
commentDiv.style.background = "#bb997744";
commentDiv.style.visibility = "visible" ;
commentDiv.style.width = "200px" ;
commentDiv.style.height = "80px";
}
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>
<li id="l4">행복해지기</li>
</ul>
<div id="commentDiv" style="position:absolute"></div>
</body>
</html>
addEventListener("mouseover",over,false);
true : 이면 이벤트 흐름 중 캡쳐 단계에서 실행된 리스너 등록
false :이면 버블 단계에서 실행될 리스너 등록
생략 가능하며 default : false
캡쳐 단계 : window에서 타켓 객체까지 이벤트 객체가
전파되는 과정(위에서 아래로)
버블 단계 : 다시 타겟에서 window까지 이벤트가 전파되는 과정(아래에서 위로)
=>기본값
표준 DOM이벤트에서 정의한 이벤트 흐름엔 3가지 단계가 있습니다,
캡쳐링 단계 : 이벤트가 하위 요소로 전파되는 단계
타깃 단계 : 이벤트가 실제 타깃 요소에 전달되는 단계
버블링 단계 : 이벤트가 상위 요소로 전파되는 단계
꾸준함의 가치를 믿는 개발자