麻辣家族討論版版 » JavaScript » (教學第34篇) Dynamic HTML 下篇

小誌 發表於 2010-5-19 10:03

(教學第34篇) Dynamic HTML 下篇

[color=darkorange][b][size=5]再談事件處理器[/size][/b][/color]
小誌說過：當你移動滑鼠或是按下滑鼠按鍵時，這個「移動」、「按下」的動作就是一個事件！例如我們之前已經用過了滑鼠的「onClick（敲擊）」事件，我們現在再來瞧瞧滑鼠的「onMouseMove（滑鼠移動）」事件，小誌先將滑鼠與鍵盤的一些相關事件控制器列表如下：
[table]
[tr][td=1,1,150][p=30, 2, center][font=全真中細圓體][font=Courier New][size=2]事件控制器[/size][/font][/font][/p][/td][td=1,1,310][p=30, 2, center][font=全真中細圓體][font=Courier New][size=2]引發時機[/size][/font][/font][/p][/td][/tr]
[tr][td=1,1,150][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]onClick[/size][/font][/color][/font][/p][/td][td=1,1,310][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]利用滑鼠點選元件[/size][/font][/color][/font][/p][/td][/tr]
[tr][td=1,1,150][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]onDrogDrop[/size][/font][/color][/font][/p][/td][td=1,1,310][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]利用滑鼠拖曳物件[/size][/font][/color][/font][/p][/td][/tr]
[tr][td=1,1,150][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]onMouseDown[/size][/font][/color][/font][/p][/td][td=1,1,310][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]按下滑鼠按鈕[/size][/font][/color][/font][/p][/td][/tr]
[tr][td=1,1,150][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]onMouseUp[/size][/font][/color][/font][/p][/td][td=1,1,310][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]放開滑鼠按鈕[/size][/font][/color][/font][/p][/td][/tr]
[tr][td=1,1,150][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]onMouseOver[/size][/font][/color][/font][/p][/td][td=1,1,310][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]將滑鼠指標移到某個元件上時[/size][/font][/color][/font][/p][/td][/tr]
[tr][td=1,1,150][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]onMouseOut[/size][/font][/color][/font][/p][/td][td=1,1,310][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]當滑鼠指標移開某個元件時[/size][/font][/color][/font][/p][/td][/tr]
[tr][td=1,1,150][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]onMouseMove[/size][/font][/color][/font][/p][/td][td=1,1,310][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]當滑鼠指標變換位置時[/size][/font][/color][/font][/p][/td][/tr]
[tr][td=1,1,150][p=30, 2, left][color=#000000][font=Courier New][size=2][b][font=全真中細圓體]OnKeyDown[/font][/b][b][font=全真中細圓體][/font][/b][/size][/font][/color][/p][/td][td=1,1,310][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]當按下鍵盤按鍵，但並未放開按鍵時[/size][/font][/color][/font][/p][/td][/tr]
[tr][td=1,1,150][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]onKeyUp[/size][/font][/color][/font][/p][/td][td=1,1,310][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]當按下鍵盤按鍵並放開按鍵時[/size][/font][/color][/font][/p][/td][/tr]
[tr][td=1,1,150][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]onKeyPress[/size][/font][/color][/font][/p][/td][td=1,1,310][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]當按下鍵盤按鍵時[/size][/font][/color][/font][/p][/td][/tr]
[/table]

小誌 發表於 2010-5-19 10:09

[color=green][size=4][b]event物件[/b][/size][/color]
Dynamic HTML中有一個相當特別的物件「event」，當我們按下滑鼠按鍵、變換滑鼠指標位置…等，這些事件的訊息都會被存放到event物件中，例如：按下滑鼠按鍵時的onClick敲擊事件時，event物件就會記錄事件發生時滑鼠游標的所在位置，又如：我們按下了鍵盤上的某個按鍵，event物件就會記錄所按下的按鍵它的ASCII碼。茲將event物件可記錄的事件訊息列表如下：
[table]
[tr][td=1,1,114][p=30, 2, center][font=Courier New][size=2][font=全真中細圓體]event[/font][font=全真中細圓體]物件屬性[/font][/size][/font][/p][/td][td=1,1,347][p=30, 2, center][font=全真中細圓體][font=Courier New][size=2]屬性訊息[/size][/font][/font][/p][/td][/tr]
[tr][td=1,1,114][p=30, 2, left][font=全真中細圓體][font=Courier New][color=#000000][size=2]x[/size][/color][/font][/font][/p][/td][td=1,1,347][p=30, 2, left][font=全真中細圓體][font=Courier New][color=#000000][size=2]滑鼠事件發生時所對應的視窗像素水平位置[/size][/color][/font][/font][/p][/td][/tr]
[tr][td=1,1,114][p=30, 2, left][font=全真中細圓體][font=Courier New][color=#000000][size=2]y[/size][/color][/font][/font][/p][/td][td=1,1,347][p=30, 2, left][font=全真中細圓體][font=Courier New][color=#000000][size=2]滑鼠事件發生時所對應的視窗像素垂直位置[/size][/color][/font][/font][/p][/td][/tr]
[tr][td=1,1,114][p=30, 2, left][font=全真中細圓體][font=Courier New][color=#000000][size=2]keyCode[/size][/color][/font][/font][/p][/td][td=1,1,347][p=30, 2, left][color=#000000][size=2][font=Courier New][font=全真中細圓體]鍵盤事件發生時的按鍵[/font]ASCII[/font][font=細明體]碼[/font][font=全真中細圓體][/font][/size][/color][/p][/td][/tr]
[tr][td=1,1,114][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]srcElement[/size][/font][/color][/font][/p][/td][td=1,1,347][p=30, 2, left][font=全真中細圓體][color=#000000][font=Courier New][size=2]事件作用對象的網頁元件[/size][/font][/color][/font][/p][/td][/tr]
[/table]



[color=Green][size=4][b]滑鼠事件應用[/b][/size][/color]
有沒有在參觀別人網頁時，發現你的滑鼠指標會帶這一張圖片跑ㄚ？只要利用event的屬性加上事件控制器的使用，就可以達到這種效果囉，輸人不輸陣，我們馬上來完成這個特效！

[attach]758[/attach]

[color=Magenta][size=4][b]實例學習：[/b][/size][/color][code]<HTML>
<HEAD><TITLE>簡易游標帶圖</TITLE></HEAD>
<!--當滑鼠指標位置改變呼叫函式變更元件位置-->
<BODY onMouseMove="document.all.map.style.pixelLeft=event.x;
document.all.map.style.pixelTop=event.y">

<img src="test.gif" alt="游移的圖片" id="map" style="position: absolute">

</BODY>
</HTML>[/code][list]
[*]按下滑鼠按鍵時的onClick敲擊事件時，event物件會記錄事件發生時滑鼠游標的所在位置，同樣的，當滑鼠指標變動位置時，event物件會記錄滑鼠指標變動位置後的水平與垂直座標像素位置。
[*]當滑鼠指標位置變動後，我們直接就把event物件記錄的滑鼠位置，指定為圖片的定位點位置，那麼圖片不就跟著滑鼠指標跑了嗎？
[*]在本例中，滑鼠指標會與跟隨的圖片重疊，這樣可能會造成一些問題，例如：點選網頁中的超鏈結時，你按下滑鼠按鍵點的是圖片還是網頁中的超鏈結ㄚ？為了改善這缺點，我們可以讓圖片不要跟隨指標那麼近，增加一些偏移量，讓兩者有些距離：
[/list][code]<HTML>
<HEAD><TITLE>偏移跟隨圖片</TITLE></HEAD>

<SCRIPT language="JavaScript">
//設定水平偏移量
offx=20
//設定垂直偏移量
offy=20
//變更元件位置函式
function move()
//利用event的屬性改變元件位置
{
document.all.map.style.pixelLeft=event.x+offx
document.all.map.style.pixelTop=event.y+offy
}
</SCRIPT>

<!--當滑鼠指標位置改變呼叫函式變更元件位置-->
<BODY onMouseMove="move()">

<img src="test.gif" alt="游移的圖片" id="map" style="position: absolute">

</BODY>
</HTML>[/code][attach]759[/attach]

小誌 發表於 2010-5-19 10:11

[color=Green][size=4][b] 鍵盤事件使用[/b][/size][/color]
其實鍵盤事件好像比較不常用，不果小誌還是提供小小的範例來供大家參考與應用，還記得之前event物件的keyCode屬性吧？這個屬性內容就是記錄鍵盤事件所使用的按鍵ASCII碼，例如按下”c”，就會得到一個ASCII碼”67”。

因為鍵盤事件的使用幾乎都相同，小誌就以onKeyUp事件控制器為例說明好了。

[color=Magenta][size=4][b]實例學習：[/b][/size][/color][code]<HTML>
<HEAD><TITLE>按鍵ASCII碼</TITLE></HEAD>

<SCRIPT language="JavaScript">
function showkeycode()
{
alert(event.keyCode)
}
</SCRIPT>

<BODY onKeyUp="showkeycode()">
</BODY>
</HTML>[/code][list]
[*]首先，我們在<BODY>標籤內放置了一個onKeyUp事件處理器（原始碼第11行），當事件引發時就呼叫showkeycod()函式。
[*]當showkeycod()函式被呼叫時，就取出event物件的ceyCode屬性值(對應按鍵的ASCII碼)，然後把取得的屬性值直接利用alert()訊息視窗函式顯示出來。
[/list]
[attach]760[/attach]

小誌 發表於 2010-5-19 10:17

[color=DarkOrange][size=5][b]摺疊[/b][/size][/color]
[attach]761[/attach]

什麼是摺疊ㄚ？摺疊就如同你在操作檔案總管的那種效果，看一下上圖你就明白了！這種摺疊的效果，也有人稱之為「樹枝壯目錄」，這種選單之下還有子選單的架構就稱之為摺疊，要決定網頁元件出現與否的屬性是哪一個ㄚ？是「visiblity」對吧！「visiblity」屬性確實能決定元件的可見與否，但是，在元件的原始位置上會留下空白，如下例：我在網頁中安插三張圖片，當我點擊任一張圖片，它們都會隱藏起來，但只是你”看不見” 而已，事實上，它還在原來的位置上，網頁中的空間並沒有因為你看不見圖片而釋放！[code]<html>
<head><title>visibility屬性展示</title></head>
<body>
<p><img border="0" src="ada.gif" onClick="this.style.visibility='hidden'"></p>
<p><img border="0" src="test.gif" onClick="this.style.visibility='hidden'"></p>
<p><img border="0" src="adb.gif" onClick="this.style.visibility='hidden'"></p>
</body>
</html>[/code][attach]762[/attach]

哇！那使用「visiblity」屬性就做不出摺疊效果了嘛，沒錯！但是還有一個隱藏元件的屬性可用喔！

要隱藏網頁元件，同將元件所佔用的網頁空間釋放出來，我們可以使用『display』屬性！

[attach]763[/attach][code]<html>
<head><title>display屬性展示</title></head>
<body>
<p><img border="0" src="ada.gif" onClick="this.style.display='none'"></p>
<p><img border="0" src="test.gif" onClick="this.style.display='none'"></p>
<p><img border="0" src="adb.gif" onClick="this.style.display='none'"></p>
</body>
</html>
[/code]『display』屬性值若設定為「none」，則會隱藏網頁元件並將網頁空間釋放出來，如果給它一個空值，則網頁會秀出來，並擠入網頁中，當然，『display』屬性還有其他的設定值，但不在本教學探討範圍，有興趣請參考相關的CSS書籍。

現在小誌簡單的來示範一個摺疊的樹枝目錄選單：
[attach]764[/attach]
首先我們利用<DIV>區塊標籤做一個蜂巢式的組合（就是區塊中還包含另一個區啦！），見上圖，藍色敘述的<DIV>區塊是最外層的區塊，我們沒有設定它的display屬性，所以在網頁中我們可以看到區塊的內容「麻辣家族」這四個字；紅色敘述的<DIV>區塊是內層的區塊，我們設定它的display屬性為’none’，所以在網頁中我們見不到區塊的內容，同我們將這內層區塊的ID屬性設為「myhome」。

當外層的區塊產生敲擊事件時會呼叫 expcontrol()函式，該函式的內容如下：[code]function expcontrol()
{
      if (document.all.myhome.style.display=='none')
       {
       document.all.myhome.style.display=''
       }
     else
       {
       document.all.myhome.style.display='none'
       }
}[/code]當expcontrol()函式被呼叫時，我們先判斷內層區塊（myhome）目前的狀態，如果它是隱藏的，我們就將它顯示出來，反之則將其隱藏起來，如此就產生了摺疊效果！

[attach]765[/attach]

很簡單，對吧！依此類推，你就可以建立更多層次的堆疊了！好，小誌再給一個範例，但是不做解釋了喔！讓你腦力激盪一下，如果你能做出一個程式碼簡潔又是多層且多項目式的摺疊目錄，寫E-Mail給小誌，並介紹你的設計原理，小誌將會以專欄的方式將你的信件發表在網站上，並送你一份小禮物！

查看完整版本: (教學第34篇) Dynamic HTML 下篇