DOM3級事件中定義了9個鼠標事件。
- mousedown:鼠標按鈕被按下（左鍵或者右鍵）時觸發。不能通過鍵盤觸發。
- mouseup:鼠標按鈕被釋放彈起時觸發。不能通過鍵盤觸發。
- click:單擊鼠標左鍵或者按下回車鍵時觸發。這點對確保易訪問性很重要，意味着onclick事件處理程序既可以通過鍵盤也可以通過鼠標執行。
- dblclick:雙擊鼠標左鍵時觸發。
- mouseover:鼠標移入目標元素上方。鼠標移到其后代元素上時會觸發。
- mouseout:鼠標移出目標元素上方。
- mouseenter:鼠標移入元素范圍內觸發，該事件不冒泡，即鼠標移到其后代元素上時不會觸發。
- mouseleave:鼠標移出元素范圍時觸發，該事件不冒泡，即鼠標移到其后代元素時不會觸發。
- mousemove:鼠標在元素內部移到時不斷觸發。不能通過鍵盤觸發。
涉及到三個鼠標事件：mousedown，mousemove，mouseup。分別是按下鼠標，移動鼠標，松開鼠標。
style對象
style對象和document對象下的集合對象styleSheet有關系，styleSheets是文檔中所有style對象的集合，這里講解的重點是style對象，styleSheets不是重點。
style對象定義：表示當前元素的樣式設置。
坦克轉向
講解背景樣式
（1）做四個圖片
改變src="???"
<img src=""/>z這樣會向服務器發出請求。
（2）一次加載一個背景圖，通過顯示該背景圖片的不同部分，實現轉向的效果。
background-position-y:40px;
這是一個非常奇怪的設定。
以紅色點為原點，向上為background-position-y正方形，所以，當background-position-y為0時，取的是
，當background-position-y為40取的是
，當background-position-y為80時取的是
以此內推。而background-position-y為-40時取的就是
<!DOCTYPE HTML> <html> <head> <title>Document</title> </head> <body onkeydown="dosomething(event)"> <div id="filed" style="background-color:black;width:500px;height:400px;position:absolute"> <div id="mytank" style="background-position-y:-40px;background-image:url('tank.png');width:40px;height:40px;position:absolute"></div> </div> <script language="javascript" type="text/javascript"> <!-- //用面向對象的方法開發，web版本的坦克大戰1.0（可以通過asdw鍵來控制坦克的走向） function MyTank(x,y,direct){ this.x=x;//坦克的橫坐標 this.y=y;//坦克的縱坐標 this.direct=direct; this.speed=1;//速度 //初始化 mytank.style.left=this.x+"px"; mytank.style.top=this.y+"px"; mytank.style.backgroundPositionY="0px"; //event表示按鍵事件 this.move=function move(event){ //a 表示左 //s 表示向下 //d 表示右 //w 表示向上 switch(event.keyCode){ case 65: //a表示向左 3 this.x-=this.speed; this.direct=3; mytank.style.backgroundPositionY="40px"; break; case 83: //s表示向下 2 this.y+=this.speed; this.direct=2; mytank.style.backgroundPositionY="80px"; break; case 68: //d表示右 1 this.x+=this.speed; this.direct=1; mytank.style.backgroundPositionY="120px"; break; case 87: //w表示向上 0 this.y-=this.speed; this.direct=0; mytank.style.backgroundPositionY="0px"; break; } //統一改變位置 mytank.style.left=this.x+"px"; mytank.style.top=this.y+"px"; } } //判斷用戶希望干什么 function dosomething(event){ if(event.keyCode==65||event.keyCode==68||event.keyCode==83||event.keyCode==87){ hero.move(event); } } var hero=new MyTank(200,360,0); //--> </script> </body> </html>