麻辣家族討論版版 - Powered by Discuz! Board

標題: [教學] (教學第34篇) Dynamic HTML 下篇 [打印本頁]

作者: 小誌 時間: 2010-5-19 10:03 標題: (教學第34篇) Dynamic HTML 下篇

再談事件處理器
小誌說過：當你移動滑鼠或是按下滑鼠按鍵時，這個「移動」、「按下」的動作就是一個事件！例如我們之前已經用過了滑鼠的「onClick（敲擊）」事件，我們現在再來瞧瞧滑鼠的「onMouseMove（滑鼠移動）」事件，小誌先將滑鼠與鍵盤的一些相關事件控制器列表如下：

事件控制器	引發時機
onClick	利用滑鼠點選元件
onDrogDrop	利用滑鼠拖曳物件
onMouseDown	按下滑鼠按鈕
onMouseUp	放開滑鼠按鈕
onMouseOver	將滑鼠指標移到某個元件上時
onMouseOut	當滑鼠指標移開某個元件時
onMouseMove	當滑鼠指標變換位置時
OnKeyDown	當按下鍵盤按鍵，但並未放開按鍵時
onKeyUp	當按下鍵盤按鍵並放開按鍵時
onKeyPress	當按下鍵盤按鍵時

作者: 小誌 時間: 2010-5-19 10:09

event物件
Dynamic HTML中有一個相當特別的物件「event」，當我們按下滑鼠按鍵、變換滑鼠指標位置…等，這些事件的訊息都會被存放到event物件中，例如：按下滑鼠按鍵時的onClick敲擊事件時，event物件就會記錄事件發生時滑鼠游標的所在位置，又如：我們按下了鍵盤上的某個按鍵，event物件就會記錄所按下的按鍵它的ASCII碼。茲將event物件可記錄的事件訊息列表如下：

event物件屬性	屬性訊息
x	滑鼠事件發生時所對應的視窗像素水平位置
y	滑鼠事件發生時所對應的視窗像素垂直位置
keyCode	鍵盤事件發生時的按鍵ASCII碼
srcElement	事件作用對象的網頁元件

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

[attach]758[/attach]

實例學習：

<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>

複製代碼

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

<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>

複製代碼

[attach]759[/attach]

作者: 小誌 時間: 2010-5-19 10:11

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

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

實例學習：

<HTML>
<HEAD><TITLE>按鍵ASCII碼</TITLE></HEAD>
<SCRIPT language="JavaScript">
function showkeycode()
{
alert(event.keyCode)
}
</SCRIPT>
<BODY onKeyUp="showkeycode()">
</BODY>
</HTML>

複製代碼

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

[attach]760[/attach]

作者: 小誌 時間: 2010-5-19 10:17

摺疊
[attach]761[/attach]

什麼是摺疊ㄚ？摺疊就如同你在操作檔案總管的那種效果，看一下上圖你就明白了！這種摺疊的效果，也有人稱之為「樹枝壯目錄」，這種選單之下還有子選單的架構就稱之為摺疊，要決定網頁元件出現與否的屬性是哪一個ㄚ？是「visiblity」對吧！「visiblity」屬性確實能決定元件的可見與否，但是，在元件的原始位置上會留下空白，如下例：我在網頁中安插三張圖片，當我點擊任一張圖片，它們都會隱藏起來，但只是你”看不見” 而已，事實上，它還在原來的位置上，網頁中的空間並沒有因為你看不見圖片而釋放！

<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>

複製代碼

[attach]762[/attach]

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

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

[attach]763[/attach]

<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>

複製代碼

『display』屬性值若設定為「none」，則會隱藏網頁元件並將網頁空間釋放出來，如果給它一個空值，則網頁會秀出來，並擠入網頁中，當然，『display』屬性還有其他的設定值，但不在本教學探討範圍，有興趣請參考相關的CSS書籍。

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

當外層的區塊產生敲擊事件時會呼叫 expcontrol()函式，該函式的內容如下：

function expcontrol()
{
if (document.all.myhome.style.display=='none')
{
document.all.myhome.style.display=''
}
else
{
document.all.myhome.style.display='none'
}
}

複製代碼

當expcontrol()函式被呼叫時，我們先判斷內層區塊（myhome）目前的狀態，如果它是隱藏的，我們就將它顯示出來，反之則將其隱藏起來，如此就產生了摺疊效果！

[attach]765[/attach]

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

歡迎光臨麻辣家族討論版版 (http://forum.twbts.com/)