JavaScript 프로그래밍 시작하기(5과)_기본 지식

마우스 이벤트(1부)

강좌가 진행되면서 따라갈 수 있는 사람이 점점 적어지는 건, 퍼포먼스도 별로 없고 암기만 하고, 아무도 관심을 두지 않아서 그런 것인지 모르겠습니다. . 실제로 웹 페이지에서

의 특수 효과와 액션 중 상당수는 대부분 JavaScript를 사용하여 구현됩니다. JavaScript가 없는 웹 페이지는 근육이 없는 사람과 같습니다. 그러나 모든 동작은 함수

에 의해 제어되며 제어문은 그 기초의 기초입니다. 인내심을 갖고 계속해서 배울 수 있기를 바랍니다. 오늘 강좌는 그냥 편안한 강좌이니 조금만 공부하시면 결과를 보실 수 있습니다.
주요 내용은 마우스 기반 이벤트로,
1.mouseover(마우스가 이동)
2.mouseout(마우스가 밖으로 이동)
3.mousemove(마우스가 이동)
4.mousedown(마우스 다운)
5.mouseup(마우스 업)
6.click(클릭)
7.dblclick(더블클릭)

보통 1과 2가 합쳐져 ​​있어요 사용자가 하이퍼링크나 다른 요소로 마우스를 이동하면 mouseout 이벤트가 발생합니다. 마우스

가 떠나면 mouseout 이벤트가 발생하기 때문입니다.
예:

http://www.javascript.com.cn

글꼴 스타일 변화 살펴보기




여기 글꼴 스타일을 변경하기 위해 두 가지 함수가 정의됩니다. 나중에 기능에 대해 자세히 설명하겠습니다.
(참고: Internet Explorer는 페이지의 모든 요소에 대해 마우스오버 및 마우스아웃 이벤트를 지원하지만 Netscape Navigator의 경우 하이퍼링크와 레이어만 이 두 이벤트를 지원합니다.)

아래 마우스 움직임을 보세요 예:

X:
Y: TYPUE="TEXT" NAME="y " SIZE= "4">




마우스 움직임 이벤트는 주로 마우스 팔로우 효과에 사용됩니다. 온라인에는 많은 것들이 있습니다.
(이 이벤트 처리 프로세스를 시작하는 데 문제가 있다는 점에 유의해야 합니다. 즉, 다른 이벤트를 차단할 수 있습니다. 또한 페이지 처리 시간도 늘어나므로 최대한 적게 사용해야 합니다. 가능합니다.)

먼저 얘기해보겠습니다. 그러면 다음 섹션에서는 마우스의 다른 네 가지 이벤트에 대해 이야기하겠습니다.


오늘의 숙제는
1. 그림 링크 변환(마우스를 올리면 한 그림, 마우스를 놓으면 다른 그림) <script> <BR>function text_onmouseover(){ <BR>mytext.style.fontSize="30pt"; <BR>mytext.style.color="red"; <BR>mytext.style.fontStyle="italic"; <BR>} <BR>function text_onmouseout(){ <BR>mytext.style.fontSize="20pt"; <BR>mytext.style.color="blue"; <BR>mytext.style.fontStyle="normal"; <BR>} <BR></script> 2. 그림이 마우스를 따라 움직입니다. (마우스를 움직이면 그림도 함께 움직입니다.) <script> <BR>if (navigator.appName == 'Netscape') <BR>{ <BR>document.captureEvents(Event.MOUSEMOVE); <BR>document.onmousemove = netscapeMouseMove; <BR>} <br><br>function netscapeMouseMove(e) { <BR>if (e.screenX != document.test.x.value && e.screenY != document.test.y.value) <BR>{ <BR>document.test.x.value = e.screenX; <BR>document.test.y.value = e.screenY; <BR>} <BR>} <br><br>function micro$oftMouseMove() { <BR>if (window.event.x != document.test.x.value && window.event.y != document.test.y.value) <BR>{ <BR>document.test.x.value = window.event.x; <BR>document.test.y.value = window.event.y; <BR>} <BR>} <BR></script>