e.clientX , e.clientY는 마우스 커서가 있는 위치를 나타내는 픽셀 값인데, 브라우저에서 현재 출력된 문서의 윈도우를 기준으로 합니다. 만일 이 값이 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으로 한 상대값입니다.
만일 이 값이 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으로 한 상대값입니다.