[질문] 자바스크립트 event.x 를 어찌.

[재성이]

...

오늘 디자이너가 몽창 넘겨준 페이지를
열어보니 자바스크립트로
일정표를 구현해 놓았더군요.

화면에 달력이 그려져 있고,
각 날자에는 해당하는 일정이 써져있고,
일정위로 마우스를 가져 가면,
상세 일정이 샥 나타나게 하는 스크립트였습니다.

Div를 안보이게 두었다가, 보이게 했다가 하는 식인데.
Div를 보이게 할 위치가 문제가 되는군요.

현재는.
function ShowContent(str1,str2,str3){

document.getElementById('scheduleDiv').style.left = event.x-50;
document.getElementById('scheduleDiv').style.top = event.y-40+document.body.scrollTop;
document.getElementById('scheduleDiv').style.display = "block";
document.getElementById('scheduleDate').innerHTML = str3;
document.getElementById('scheduleSubject').innerHTML = str1;
document.getElementById('scheduleContent').innerHTML = str2;
}

분명 익스플로러에서만 사용되는 것인데,
파이어폭스에서도 돌아가게 하려면 어떻게 고쳐야 할까요?

그리고,
파폭에 알맞은 스크립트들을 정리해 놓은 사이트는 없나요?

p.s
예리하신 분이라면 아시겠지만,
getElementById ... 이것도 제가 고친거네요.
당근 document.all. ~ 로 왔었습니다. ㅋ

[박민권]

웹개발을 위한 문서는 이곳에도 있습니다.
http://www.mozilla.or.kr/docs/web-developer/

영문이지만 뭐 중요한건 소스이니 샘플소스 보시면 그리
어렵지 않을 것이라고 봅니다. 저도 영어 딥따 못하거든요.

event는 익스와 다르게 쓰입니다. 익스는 window.event
객체인데 불여우의 event는 바로 그 객체에서 생성됩니다.
(설명이 좀 모호합니다. 죄송)

익스에서는
<img src="이미지" onclick="test()" />
fucntion test(){
event 어쩌구~
}

이렇지만 불여우에서 event를 쓰시려면
<img src="이미지" onclick="test(event)" />
fucntion test(e){
e 어쩌구~
}

이런식으로 event를 인수로 넘겨줘야 합니다.

그래서 익스와 같이 쓰시려면
<img src="이미지" onclick="test(event)" />
fucntion test(e){
if(익스) event 어쩌구~
else e 어쩌구~
}

이런식으로 사용하시면 됩니다.

그리고 style.left = event.x-50 이 부분도 고쳐야 합니다.
style.left = (event.x-50) + 'px';
정확한 단위를 넣어주셔야 합니다.

...eduleDiv').style.display = "block"

이 부분은 display = 'none';를 보이게 하시렴이신가요?
단순히 보이고 안보이게 하시려면
숨긴다=> display='none';
보인다=> display='';
이렇게 하시면 됩니다. 일부러가 아니면 block속성을 줄
필요가 없습니다.

.innerHTML 이것도 권장사항이 아닙니다.

객체.appendChild(document.createTextNode("문자"));

객체에 자식을 추가한다(도큐먼트.텍스트노드객체("문자"));

이렇게 됩니다. 단 이럴경우 기존에 남은 객체에 추가되죠.
이 부분은 많은 공부를 하셔야 됩니다. 저도 고생좀 했죠.

firstNode, LastNode, ChildNodes등 각종 노드관련된
객체를 조사해보세요. 일단은 급하신대로 innerHTML을
쓰시되 앞으로 완벽한 표준을 지원하시려면 기존과는
다르게 노드를 이용한 추가, 삭제, 생성을 공부하셔야
합니다.

<div id="test" ></div>
객체(test).appendChild(document.createTextNode("문자"));

위의 코드는 아래처럼 됩니다.
<div id="test" >문자</div>

obj=document.createElement('img'); // img객체 생성

//생성한obj 객체의 src속성에 이미지경로를 넣는다.
obj.setAttribute('src','이미지경로');

//obj객체의 src속성에 대한 alert;
alert(obj.getAttribute('src'));

정말 객체의 생성과 속성부여에 대해서는 새롭게 공부하셔야합니다.
국내 어느 자바스크립트 사이트를 가더라도 자료없습니다.

<img id="img1" src="이미지" news="뉴스?" />

document.getElementById('img1').getAttribute('news')
위의 코드처럼 news라는 기존에 없는 속성을 가져오는
것도 가능하며 없는 속성을 부여하는 것도 가능합니다.
어떻게 사용하느냐에 따라 활용여부는 무궁무진.

구글검색을 통해서 각종 샘플코드를 입수하신다면 많은
정보를 얻으실 수 있습니다. 저는 자세히는 가르쳐드리지
못하고 몇몇 이런게 있다는걸 적었으니 도움이 된다면
좋겠습니다. 혹 이 부분에 대해서 공부하시다 이해가어려운
부분이 있다면 따로 질문을 올려주세요.
실력 되는한 답변해 드리겠습니다.

[박민권]

윗글 삭제를 못해서 ㅡㅡ; html사용불가 햇어야 하는데...
---------------------------------------------------------------
웹개발을 위한 문서는 이곳에도 있습니다.
http://www.mozilla.or.kr/docs/web-developer/

영문이지만 뭐 중요한건 소스이니 샘플소스 보시면 그리
어렵지 않을 것이라고 봅니다. 저도 영어 딥따 못하거든요.

event는 익스와 다르게 쓰입니다. 익스는 window.event
객체인데 불여우의 event는 바로 그 객체에서 생성됩니다.
(설명이 좀 모호합니다. 죄송)

익스에서는
<img src="이미지" onclick="test()" />
fucntion test(){
event 어쩌구~
}

이렇지만 불여우에서 event를 쓰시려면
<img src="이미지" onclick="test(event)" />
fucntion test(e){
e 어쩌구~
}

이런식으로 event를 인수로 넘겨줘야 합니다.

그래서 익스와 같이 쓰시려면
<img src="이미지" onclick="test(event)" />
fucntion test(e){
if(익스) event 어쩌구~
else e 어쩌구~
}

이런식으로 사용하시면 됩니다.

그리고 style.left = event.x-50 이 부분도 고쳐야 합니다.
style.left = (event.x-50) + 'px';
정확한 단위를 넣어주셔야 합니다.

...eduleDiv').style.display = "block"

이 부분은 display = 'none';를 보이게 하시렴이신가요?
단순히 보이고 안보이게 하시려면
숨긴다=> display='none';
보인다=> display='';
이렇게 하시면 됩니다. 일부러가 아니면 block속성을 줄
필요가 없습니다.

.innerHTML 이것도 권장사항이 아닙니다.

객체.appendChild(document.createTextNode("문자"));

객체에 자식을 추가한다(도큐먼트.텍스트노드객체("문자"));

이렇게 됩니다. 단 이럴경우 기존에 남은 객체에 추가되죠.
이 부분은 많은 공부를 하셔야 됩니다. 저도 고생좀 했죠.

firstNode, LastNode, ChildNodes등 각종 노드관련된
객체를 조사해보세요. 일단은 급하신대로 innerHTML을
쓰시되 앞으로 완벽한 표준을 지원하시려면 기존과는
다르게 노드를 이용한 추가, 삭제, 생성을 공부하셔야
합니다.

<div id="test" ></div>
객체(test).appendChild(document.createTextNode("문자"));

위의 코드는 아래처럼 됩니다.
<div id="test" >문자</div>

obj=document.createElement('img'); // img객체 생성

//생성한obj 객체의 src속성에 이미지경로를 넣는다.
obj.setAttribute('src','이미지경로');

//obj객체의 src속성에 대한 alert;
alert(obj.getAttribute('src'));

정말 객체의 생성과 속성부여에 대해서는 새롭게 공부하셔야합니다.
국내 어느 자바스크립트 사이트를 가더라도 자료없습니다.

<img id="img1" src="이미지" news="뉴스?" />

document.getElementById('img1').getAttribute('news')
위의 코드처럼 news라는 기존에 없는 속성을 가져오는
것도 가능하며 없는 속성을 부여하는 것도 가능합니다.
어떻게 사용하느냐에 따라 활용여부는 무궁무진.

구글검색을 통해서 각종 샘플코드를 입수하신다면 많은
정보를 얻으실 수 있습니다. 저는 자세히는 가르쳐드리지
못하고 몇몇 이런게 있다는걸 적었으니 도움이 된다면
좋겠습니다. 혹 이 부분에 대해서 공부하시다 이해가어려운
부분이 있다면 따로 질문을 올려주세요.
실력 되는한 답변해 드리겠습니다.

[재성이]

민권 님의 조언을 참고하여
다음과 같이 수정하였습니다.

function ShowContent(str1,str2,str3,e)
{
if (str2!='')
{
if (navigator.appName == "Microsoft Internet Explorer")
// Explorer
{
document.getElementById('scheduleDiv').style.left = window.event.clientX-50;
document.getElementById('scheduleDiv').style.top = window.event.clientY-40+document.body.scrollTop;
}
else
// FireFox or other browsers
{
document.getElementById('scheduleDiv').style.left = (e.clientX-50) + 'px';
document.getElementById('scheduleDiv').style.top = (e.clientY-40+document.body.scrollTop) + 'px' ;
}

document.getElementById('scheduleDiv').style.display = "block";
document.getElementById('scheduleDate').innerHTML = str3;
document.getElementById('scheduleSubject').innerHTML = str1;
document.getElementById('scheduleContent').innerHTML = str2;
}
}

혹시 저랑 같은 고민을 하실 분들을 위하여 올립니다.

그리고,
http://www.javascriptkit.com/
라는 사이트에서 정보를 찾은 건데.
아직 제대로 뒤적거리진 않았지만
자바스크립트 레퍼런스 사이트인듯 합니다.

그럼~ ^^

[빛알갱이]

브라우저 이름에 의존하는 것은 그다지 바람직한 방법이 아니라고 생각합니다. 다음과 같이 하면 어떨까요? 여러 브라우저를 지원하는 것이 손이 많이 가고 전송량도 많아진다는 오해를 주지 않기 위해서라도 간결하게 짤 수 있음을 보여 주어야 하지 않을까요?
(정말 그것을 피할 수 없는 경우도 있기는 할 것입니다)

Code: Select all

function ShowContent(str1,str2,str3,e)
{
  if (str2=='')
    return;
  
  if (window.event)
    var e = window.event;

  sDivStyle = document.getElementById('scheduleDiv').style;
  sDivStyle.left = (e.clientX-50) + 'px';
  sDivStyle.top = (e.clientY-40+document.body.scrollTop) + 'px' ;
  sDivStyle.display = "block";

  document.getElementById('scheduleDate').innerHTML = str3;
  document.getElementById('scheduleSubject').innerHTML = str1;
  document.getElementById('scheduleContent').innerHTML = str2;
}

참, ΜS IE event model과 W3C event model이 많이 달라서 좀 귀찮은데, 이런 것을 처리해 주는 라이브러리가 있습니다. 이 게시판에서 제가 쓴 글에서 언급했으니 가져다가 쓰시면 아예 맨 윗 줄의 'if (window.event) var e = window.event;'도 쓰지 않아도 될 것입니다.

Event 모델 비교는 다음 웹 사이트에 있고요.
http://www.quirksmode.org/js/events_compinfo.html

Creative Commons License로 나온 JS 라이브러리는 다음 장소에서 구할 수 있습니다.
http://www.dithered.com/javascript/

[빛알갱이]

브라우저 이름에 의존하는 것은 그다지 바람직한 방법이 아니라고 생각합니다. 다음과 같이 하면 어떨까요? 여러 브라우저를 지원하는 것이 손이 많이 가고 전송량도 많아진다는 오해를 주지 않기 위해서라도 간결하게 짤 수 있음을 보여 주어야 하지 않을까요?
(정말 그것을 피할 수 없는 경우도 있기는 할 것입니다)

Code: Select all

function ShowContent(str1,str2,str3,e)
{
 .....
  if (window.event)
    var e = window.event;
  ....

showContent를 부르는 곳에서 아래 A처럼 event를 맨 마지막 인자로 넘겨 주면 B와 같은 부분은 필요 없습니다.
A.

Code: Select all

< ....  onkeypress="ShowContent('a', 'b', 'c', event)" ....>

t

B.

Code: Select all

if (window.event)
   var e= window.event