May 27, 2016 afternoon (wonderful classroom JS Basics-3 Notes II (event))

Source: Internet
Author: User

One, mouse events

  1. Mouse position

Visual Area location: ClientX, ClientY (mouse coordinates)

Here we note that now we only know that it is the coordinates of the mouse, but we do not know what the mouse coordinates, now let's look at an example:

--Example 1: Div following the mouse

(1) The OnMouseMove event occurs when the mouse pointer moves.

Note: A MouseMove event occurs whenever the user moves the mouse one pixel. This consumes system resources to handle all these MouseMove events. Therefore, use this event with caution.

#div1 {width:100px; height:100px; background:red; position:absolute;} </style><meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/><title> Untitled document </title> <script type=" Text/javascript ">Document.onmousemove=function(EV) {var oevent=ev| |        Event varOdiv=document.getelementbyid (' Div1 '); ODiv.style.left =oevent.clientx+ ' px '; odiv.style.top=oevent.clienty+ ' px ';    }; </script>

Another problem arises here, as shown in the code below;

#div1 {width:100px; height:100px; background:red; position:absolute;} </style><meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/><title> Untitled document </title> <script type=" Text/javascript ">Document.onmousemove=function(EV) {varoevent=ev| |event; varOdiv=document.getelementbyid (' Div1 '); ODiv.style.left=oevent.clientx+ ' px '; ODiv.style.top=oevent.clienty+ ' px ';    }; </script><body style= "height:2000px;" ><div id= "Div1" ></div></body>

  When we add a height to the body, we find that the div is out of the mouse, so what is this, and then let's take a look at where the problem appears?

In fact, the clientx is talking about the visual area coordinates, what is the visual area? What is visual area coordinates?

  Here comes another scroll distance (scroll bar): ScrollTop property;

-Eliminate the effect of scroll bars

-The meaning of the scroll bar-the distance between the visible area and the top of the page

Document.onclick=function ()        {            //Non-Chrome            //alert (document.             DocumentElement. scrolltop); Under Chrome no matter how scrolling is 0;            //Chrome            //alert (document.                             Body. scrolltop); All can           var scrolltop=document.documentelement.scrolltop| | Document.body.scrollTop;        alert (scrolltop);    }; </script>

  This kind of code will not only deal with the problem of compatibility, but also deal with the problem of the scroll bar;

Then we can use it in the code above to solve the problem above;

<style type= "Text/css" >#div1 {width:100px; height:100px; background:red; position:absolute;} </style><meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/><title> Untitled document </title> <script type=" Text/javascript ">Document.onmousemove=function(EV) {varoevent=ev| |event; varOdiv=document.getelementbyid (' Div1 '); var scrolltop=document.documentelement.scrolltop| |            Document.body.scrollTop; var scrollleft=document.documentelement.scrollleft| | Document.body.scrollLeft; ODiv.style.left=oevent.clientx+scrollleft+ ' px '; ODiv.style.top=oevent.clienty+scrolltop+ ' px ';    }; </script>

    In this case, the DIV will always follow the mouse, but here again there is a problem, is the DIV will flash (because it wants to constantly reposition), then how to deal with this problem? In the back to learn the movement of the piece will be to solve this problem, we can also use fixed positioning, but fixed positioning under IE6 incompatible. In the BOM that lesson has related problems to deal with.

Note: The small experience: the main you use the CLIENTX, you must add scrollleft, as long as the use of clienty, you must add scrolltop. (There will be potential problems if not added.) )

2, get the absolute position of the mouse on the page

Encapsulation functions

Example 2: A string of div following the mouse

Div {width:10px; height:10px; background:red; position:absolute;} </style><meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/><title> Untitled document </title> <script type=" Text/javascript ">window.onload=function ()        {            varAdiv=document.getelementsbytagname (' div '); varI=0; Document.onmousemove=function(EV) {varoevent=ev| |event; Take the mouse coordinatesFor (i=adiv.length-1;i>0;i-- ) { adiv[i].style.left =adiv[i-1].style.left; After a div followed by a Div walk, adiv[i].style.top=adiv[i-1 ].style.top; } adiv[ 0].style.left=oevent.clientx+ ' px '; The first div follows the mouse walk; adiv[0].style.top=oevent.clienty+ ' px ';        };    }; </script>second, keyboard events

Onclick=onmousedown+onmouseup; (mouse click)

Onpress=onkeydown+onkeyup; (keyboard pressed)

  1, KeyCode (key code)

<script>        Document.onkeydown=function  (EV) {            var oevent=ev| | event;            Alert (oevent.  KeyCode);        };     </script>

Gets the key that the user presses on the keyboard

--Example: Keyboard control div move

Here we learn a property for preparation: offset

(1) offsetwidth: Is the width of the div +border+padding ;

(2) Offsetheight: is the height of Div +border+padding; //Two does not include the value of margin;

  #div1 {width:100px;  height:100px; background:red; border:1px solid black ; padding:10px;  margin:20px;    Position:absolute;}  </style><meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/><title> Untitled document </title> <script type=" Text/javascript "> window.onload  =function   () {  var  Odiv=document.getelementbyid (' Div1 '            );        Alert (Odiv.offsetheight );       //pop-up 122, (100+1+1+10+10) 
//alert (odiv.offsetwidth); //Eject 122, (100+1+1+10+10)
        };     </script>

(3) Offsetleft:

(4) OffsetTop:

  #div1 {width:100px; height:100px;  background:red; border:1px solid black;  padding:10px; margin:20px; Position:absolute;    left:100px; top:100px;  }  </style><meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/><title> Untitled document </title> <script type=" Text/javascript "> window.onload  =function   () {  var  Odiv=document.getelementbyid (' Div1 '            );        alert (odiv.offsetheight);    };  </script>

2. Other properties

Ctrlkey, Shiftkey, Altkey

--Example: Submit a message

-Enter Submit

-ctrl+ Enter Submit

May 27, 2016 afternoon (wonderful classroom JS Basics-3 Notes II (event))

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.