묻고답하기
쟈바스크립트 소스에 관한 질문입니다...ㅠㅠ
2003.11.05 17:53
아래...첫번째..소스는...마우스를..클릭하면...좌표를.표시해 주는 것이고..두번째는..마우스를..움직이면..십자가가..따라다니는..것입니다...
여기서..궁금한 것은..둘다....마우스..이벤트를..사용한..소스인데...첫번째..것은..마우스를..한번..클릭하면..좌표가 표시되고..또..클릭해도.....좌표의...수치는..바뀌지 않습니다...즉....이벤트의 생명이...한번으로..끝난다는..얘기죠...
헌데..두번째..소스는....마우스를..이리저리...막..움직여도....십자가가.계속..따라다닙니다..즉.....이벤트의..생명이..영속하다는..얘기인데요......
첫번째..소스는..이해가..되는데..두번째..소스는...반복..구문이나..재귀..구문도..없는데...어떻게....십자가가..마우스를..한번이...아니고..계속..따라다니는지..궁금합니다..
그럼..답변..기다릴게요.
첫번째.....소스....
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title>Untitled</title>
<script language="JavaScript">
<!--
function aa()
{
if(window.event.button==1)
{document.write("x=",window.event.x,"<br>")
document.write("y=",window.event.y)}
}
document.onmousedown=aa
//-->
</script>
</head>
<body>
</body>
</html>
두번째..소스..
<html>
<head>
<title>비틀즈</title>
<style>
<!--
#leftright, #topdown{
position:absolute;left:0;top:0;width:1px;height:1px;
layer-background-color:black;background-color:black;z-index:100;font-size:1px;}
-->
</style>
</head><body><div id="leftright" style="width:expression(document.body.clientWidth-2)"></div>
<div id="topdown" style="height:expression(document.body.clientHeight-2)"></div>
<script language="JavaScript">
<!--
if (document.all&&!window.print){
leftright.style.width=document.body.clientWidth-2
topdown.style.height=document.body.clientHeight-2}
else if (document.layers){document.leftright.clip.width=window.innerWidth
document.leftright.clip.height=1
document.topdown.clip.width=1
document.topdown.clip.height=window.innerHeight}
function followmouse1(){leftright.style.pixelTop=document.body.scrollTop+event.clientY+1
topdown.style.pixelTop=document.body.scrollTop
if (event.clientX<document.body.clientWidth-2)
topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1
else topdown.style.pixelLeft=document.body.clientWidth-2}
function followmouse2(e){document.leftright.top=e.y+1
document.topdown.top=pageYOffset
document.topdown.left=e.x+1}
if (document.all)document.onmousemove=followmouse1
else if (document.layers){window.captureEvents(Event.MOUSEMOVE)
window.onmousemove=followmouse2}
//-->
</script>
<br><br><br><br>
<p align="center"><img src="beat.gif"></p>
</body>
</html>
여기서..궁금한 것은..둘다....마우스..이벤트를..사용한..소스인데...첫번째..것은..마우스를..한번..클릭하면..좌표가 표시되고..또..클릭해도.....좌표의...수치는..바뀌지 않습니다...즉....이벤트의 생명이...한번으로..끝난다는..얘기죠...
헌데..두번째..소스는....마우스를..이리저리...막..움직여도....십자가가.계속..따라다닙니다..즉.....이벤트의..생명이..영속하다는..얘기인데요......
첫번째..소스는..이해가..되는데..두번째..소스는...반복..구문이나..재귀..구문도..없는데...어떻게....십자가가..마우스를..한번이...아니고..계속..따라다니는지..궁금합니다..
그럼..답변..기다릴게요.
첫번째.....소스....
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title>Untitled</title>
<script language="JavaScript">
<!--
function aa()
{
if(window.event.button==1)
{document.write("x=",window.event.x,"<br>")
document.write("y=",window.event.y)}
}
document.onmousedown=aa
//-->
</script>
</head>
<body>
</body>
</html>
두번째..소스..
<html>
<head>
<title>비틀즈</title>
<style>
<!--
#leftright, #topdown{
position:absolute;left:0;top:0;width:1px;height:1px;
layer-background-color:black;background-color:black;z-index:100;font-size:1px;}
-->
</style>
</head><body><div id="leftright" style="width:expression(document.body.clientWidth-2)"></div>
<div id="topdown" style="height:expression(document.body.clientHeight-2)"></div>
<script language="JavaScript">
<!--
if (document.all&&!window.print){
leftright.style.width=document.body.clientWidth-2
topdown.style.height=document.body.clientHeight-2}
else if (document.layers){document.leftright.clip.width=window.innerWidth
document.leftright.clip.height=1
document.topdown.clip.width=1
document.topdown.clip.height=window.innerHeight}
function followmouse1(){leftright.style.pixelTop=document.body.scrollTop+event.clientY+1
topdown.style.pixelTop=document.body.scrollTop
if (event.clientX<document.body.clientWidth-2)
topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1
else topdown.style.pixelLeft=document.body.clientWidth-2}
function followmouse2(e){document.leftright.top=e.y+1
document.topdown.top=pageYOffset
document.topdown.left=e.x+1}
if (document.all)document.onmousemove=followmouse1
else if (document.layers){window.captureEvents(Event.MOUSEMOVE)
window.onmousemove=followmouse2}
//-->
</script>
<br><br><br><br>
<p align="center"><img src="beat.gif"></p>
</body>
</html>
댓글 4
-
서방걸
2003.11.05 19:20
-
M@xPond
2003.11.05 19:00
다른언어에선 몰겠구요..
암튼 jscript에선 ()괄호 안써두 호출됩니다.
if (document.all)document.onmousemove=followmouse1
이벤트 발생시 호출부분.. followmouse1 == followmouse1() -
M@xPond
2003.11.06 13:27
이벤트가 영속되는게 아닌거 같은데요
document.onmousemove=followmouse1
onmousemove 이벤트 발생하는 즉시 followmouse1() 이함수를 계속 호출하는데요..-_-; -
M@xPond
2003.11.06 13:29
참글구 이벤트 제귀나 반복없이 영속되는 법은 몰르겠네요..그런방법이 있는지..;;
전..이벤트의...영속이....어떻게 가능하냐는..겁니다.....ㅠㅠ..고수님들..리플좀..달아주세요..