南大軟院大神養成計畫第十二天

今天是南大軟院大神養成計畫實施的第十二天，今天學習的內容是dom事件探秘部分的最後部分——事件型別。事件型別從來大類來分可以分為滑鼠事件和鍵盤事件。

先說說滑鼠事件，滑鼠事件可以分為click，over，out，在講解這部分的內容時，講師引用了qq面板拖拉效果來講解滑鼠事件。

如圖，我們可以通過滑鼠拖動qq面板，這個網頁中，我們常常見到這類效果，而這類效果主要使用了滑鼠事件。

如何實現這類效果呢？先看效果的原理：

具體的內容這裡就不詳細講到了，這裡主要講到需要使用的一些知識。在這講些效果之前，講師封裝了乙個getelementsbyclassname函式，這個函式在只能支援ie10以上的瀏覽器，所以我們必須自己去封裝一下，這個函式時獲取指定類名的函式。**實現如下：

function getbyclass(clsname,parent){

var oparent=parent?document.getelementbyid(parent):document,

eles=,

elements=oparent.getelementsbytagname('*');

for(var i=0,l=elements.length;i

這個效果實現主要是通過qq面板位置跟隨游標變化而變化，所以我們需要知道游標的位置，這就需要用到游標位置clientx clienty，然後設定qq面板相應的位置。知道了這些，大致的效果就可以弄出來了。

接下來看看鍵盤事件，鍵盤事件，講師引用的是**，當我們按一次enter鍵就會開始**，再按一次就會停止。首先說說如何生成隨機數：math.random()生成隨機數，這個產生的是0到1中的隨機數。鍵盤事件主要分為以下幾類：

keydown:當使用者按下鍵盤上的任意鍵時觸發，而且如果按住不放的話，會重複觸發此事件

keypress:當使用者按下鍵盤上的字元鍵時觸發，而且如果按住不放的話，會重複觸發此事件

keyup:當使用者釋放鍵盤上的鍵時觸發

所以在**事件我們用到的是keydowm事件。

這裡具體類容就不解釋了，主要是使用了鍵盤事件實現了此類效果

今天學習的類容就是這麼多，期待明天的學習。

南大軟院大神養成計畫 第十二天