본문
자바스크립트 프로그래밍에 있어서 마우스 움직임(mouse move)을 캡쳐하는 것은 흔한 일이다. 그렇기 때문에 각 브라우저별로 마우스 움직임 이벤트를 어떻게 잡아내는지 잘 알아둘 필요가 있다.
인터넷 익스플로러 4 이상을 사용하고 있다면 다음과 같은 방식을 이용한다.
|
document.onmousemove = fnMouseMove; |
물론 fnMouseMove란 함수를 다음과 같이 미리 정의해 놓아야 한다.
|
function fnMouseMove() { |
넷스케이프 4를 사용하고 있다면 다음과 같이 captureEvents 메쏘드를 이용하여 어떤 이벤트를 캡쳐할 것인지 지정해 줘야 한다.
|
document.captureEvents(Event.MOUSEMOVE); |
만일 넷스케이프 6 이상을 사용하고 있다면 다음과 같이 addEventListener 메쏘드를 이용해야 한다.
|
document.addEventListener('mousemove', fnMouseMove, true); |
각 브라우저마다 mouse move 이벤트를 캡쳐하는 방식이 다 다르므로 위의 규칙들을 잘 익혀두기 바란다.
이제 간단한 예제를 작성해 보자. 아래 소스 코드는 마우스를 움직이면 브라우저 하단의 상태 표시줄에 현재 위치의 좌표를 보여주는 예제이다. 물론 모든 브라우저에서 문제없이 잘 돌아갈 것이다.
|
<scRIPT LANGUAGE="Javascript1.2"> // 넷스케이프 4일 경우 추가 |
마우스를 움직이면서 브라우저 하단의 상태 표시줄을 보기 바란다. 마우스의 위치 좌표가 표시되는 것을 확인할 수 있을 것이다.
여기서 사용한 기법은 실제 이벤트 프로그래밍에서 많이 사용되므로 잘 익혀두기 바란다.
관련링크
댓글목록
등록된 댓글이 없습니다.