Getting Started with JavaScript Programming (Lesson 5)_Basic Knowledge

Mouse Events (Part 1)

As the course progresses, fewer and fewer people can follow. I don’t know if it’s because there isn’t much performance, it’s just rote memorization, and no one is interested. . In fact, many of the special effects and actions of

on web pages are mostly implemented using JavaScript. A web page without JavaScript is like a person without muscles. But all actions are controlled by functions

, and control statements are the foundation of the foundation. I hope you can continue to learn patiently. Today's course is just a relaxing one, and you can see the results if you study a little bit.
The main content is mouse-based events, which are as follows:
1.mouseover (mouse moves to)
2.mouseout (mouse moves out)
3.mousemove (mouse moves)
4.mousedown (mouse down)
5.mouseup (mouse up)
6.click (click)
7.dblclick (double click)

Usually 1 and 2 are combined When the user moves the mouse to a hyperlink or other element, the mouseover event will occur. The mouseout event will always be accompanied by it, because when the mouse

leaves, the mouseout event will occur.
Example:

http://www.javascript.com.cn

Look at the changes in font style




here Two functions are defined to change the font style. We will explain the function in detail later.
(Note: Internet Explorer supports mouseover and mouseout events for all elements on the page, but for Netscape Navigator, only hyperlinks and layers support these two events.)

Look at the mouse movement below Example:

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




Mouse movement events are mostly used in the mouse follow effect. You can take a look at the mouse follow effect. There are many online.
(It should be noted that there is a problem with starting this event processing process, that is, it may block other events. In addition, it also increases the processing time of the page, so it should be used as little as possible.)

Let’s talk first That's it, the next section will talk about the other four events of the mouse.


Today’s homework is:
1. Conversion of picture links (when the mouse is placed on it, it is one picture, when the mouse is left, it is another picture) <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. The picture follows the mouse (When the mouse moves, a picture will move with the mouse) <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>