網(wǎng)頁(yè)設(shè)計(jì)第十講行為事件

第十講行為事件

二我們學(xué)習(xí)圖層的相關(guān)內(nèi)容的時(shí)候曾經(jīng)接觸

了為一個(gè)對(duì)象（如圖片、鏈接等）添加一

個(gè)“行為”（或稱為動(dòng)作，例如顯示隱藏

.圖層、拖動(dòng)圖層等），然后產(chǎn)生一個(gè)

onMouseOver（鼠標(biāo)經(jīng)過(guò)）事件的例子。

作為一個(gè)對(duì)于網(wǎng)頁(yè)設(shè)計(jì)了解不多，又不了解

復(fù)雜編程的人來(lái)說(shuō)，Dreamweaver提供的

行為工具將是最好的選擇。通過(guò)這一章節(jié)

的學(xué)習(xí)，要求同學(xué)們掌握如何使用系統(tǒng)提

供的行為技術(shù)來(lái)制作一些復(fù)雜的網(wǎng)頁(yè)。

使用行為面板

一、介紹幾個(gè)基本概念

1、行為的概念

行為就是一段JavaScript代碼，這些代碼

放置在文檔中執(zhí)行特定的任務(wù)（例如打開(kāi)

瀏覽器窗口、顯示或隱藏層、播放聲音或

影片），以實(shí)現(xiàn)網(wǎng)頁(yè)的各種特殊的功能。

2、行為的基本元素—

在具體操作中：一個(gè)行為是一個(gè)事件和由

該事件觸發(fā)的動(dòng)作組成的。因此它的基本

元素有兩個(gè)：一個(gè)是事件，一個(gè)是動(dòng)作。

3、在網(wǎng)頁(yè)中怎樣使用行為？

在網(wǎng)頁(yè)中是通過(guò)“行為”面板把“行為”

附加（添加）到網(wǎng)頁(yè)元素中來(lái)實(shí)現(xiàn)各種不

-同的網(wǎng)頁(yè)效果。

4、什么是事件？三三三三三三三三

事件是瀏覽器產(chǎn)生的有效信息，也就是說(shuō)訪

一問(wèn)者對(duì)網(wǎng)頁(yè)所做的事情。如：onClick>

onMouseOver>onMouseOut等（事件與

瀏覽器的版本有關(guān)，每個(gè)瀏覽器都提供一

組事件，這些事件可以與“行為”面板的

動(dòng)作（+）彈出式菜單中列出的動(dòng)作相關(guān)聯(lián)

O瀏覽器的版本越高，可以使用的事件就

越多，反之越少。）

■標(biāo)準(zhǔn)的事件

下面介紹一些常用的事件。首先，不同版本

或不同瀏覽器對(duì)事件的支持是不一樣?？?/p>

以通過(guò)設(shè)置“顯示事件”命令來(lái)選擇對(duì)應(yīng)

的瀏覽

3.0和更高版本瀏覽器

onVnload

4.0和更高版本瀏覽器

onBeforeUnioad

IE3.0

onDataAvailable

VIE4.0，?*k

、,'r*土???onDatasetChanged

IE5.0

onDatasetComplete

IE5.5

onDragStart

IE8.0

onErrorUpdate

Netscape3.0

onFilterChange

Netscape4.0

Netscape6.0顯不事件

在使用行為事件時(shí)，一定要考慮訪問(wèn)者的瀏

覽器的版本和類型，因?yàn)榈桶姹镜臑g覽器

支持的動(dòng)作不多。在事件的菜單中可以看

到所有的事件，但不是所有的事件都常用,

下面介紹常用的事件及意義和支持該事件

的瀏覽器。

1)鼠標(biāo)類—P

onMouseDown(N41E4,IE5):當(dāng)鼠標(biāo)鍵按下時(shí)

就會(huì)發(fā)生動(dòng)作。

onMouseMove(N3,IE4』E5):當(dāng)鼠標(biāo)在對(duì)象上

面移動(dòng)時(shí)就會(huì)發(fā)生動(dòng)作。

onMouseOver(N3,N4,IE3JE4,IE5):當(dāng)鼠標(biāo)移

動(dòng)到對(duì)象的范圍時(shí)發(fā)生動(dòng)作。

onMouseOut(N3,N4,IE4/E5):當(dāng)鼠標(biāo)從對(duì)象

上移開(kāi)時(shí)發(fā)生動(dòng)任三三三三三三

onMouseUp(N4,IE41E5):當(dāng)鼠標(biāo)左鍵按下又

釋放時(shí)發(fā)生動(dòng)作。

onClick(N3,N4JE3JE4JE5):當(dāng)鼠標(biāo)單擊對(duì)

象時(shí)發(fā)生動(dòng)作，例如鏈接、按鈕、圖片等

對(duì)象用得較多。

onDblClick(N4,IE4,IE5):當(dāng)鼠標(biāo)單雙對(duì)象時(shí)發(fā)

生動(dòng)作。

2)鍵盤類

onKeyDown(N4,IE4,IE5):當(dāng)鍵盤上的任何一

個(gè)鍵被按下時(shí)就會(huì)發(fā)生動(dòng)作。

onKeyPress(N4JE4,IE5):當(dāng)鍵盤上的一個(gè)鍵

被按下又釋放時(shí)發(fā)生動(dòng)壇三三=三

onKeyUp(N4JE4,IE5):當(dāng)鍵盤上的一個(gè)鍵被

按下一段時(shí)間并被釋放時(shí)發(fā)生動(dòng)作。

3)其它類型事件

onLoad(N3,N4,IE3JE4JE5):當(dāng)打開(kāi)網(wǎng)頁(yè)時(shí)動(dòng)

作發(fā)生。

onllnload(N3,N4,IE3JE4JE5):當(dāng)離開(kāi)網(wǎng)頁(yè)時(shí)

動(dòng)作發(fā)生。

onScroll(IE4,IE5):當(dāng)滾動(dòng)條被移動(dòng)時(shí)動(dòng)作發(fā)生。

onResize(N4,IE4,IE5):當(dāng)瀏覽器窗口大小被改

變血?jiǎng)幼靼l(fā)生。

onChange(N3,N4"E3,IE4JE5):當(dāng)瀏覽者改

變了下拉框或文本框中的一個(gè)值時(shí)動(dòng)作發(fā)生。

onFocus(N3,N4"E31E4,IE5):當(dāng)元素獲得焦二

點(diǎn)時(shí)，比如單擊了一個(gè)文本框時(shí)動(dòng)作發(fā)生。

onBlur(N3,N4"E3JE4,IE5):和onFocus相反，

當(dāng)元素失去焦點(diǎn)時(shí)動(dòng)作發(fā)生。

5、什么是動(dòng)作？

動(dòng)作指的是“行為”中的JavaScript代碼所

執(zhí)行特定的操作，如打開(kāi)瀏覽器窗口、顯

示或隱藏層、播放聲音三二=

綜上所述，可以得歸納如下幾點(diǎn)：“行為”

是響應(yīng)某一“事件”而采取的一個(gè)“動(dòng)作

”；“行為”是通過(guò)“行為”面板來(lái)添加

到網(wǎng)頁(yè)元素中；行為中的動(dòng)作必須要有由

與它關(guān)聯(lián)的事件來(lái)觸發(fā)。

注意：行為代碼是客戶端JavaScript代碼;

即它運(yùn)行于瀏覽器中，而不是服務(wù)器上。

二、打開(kāi)行為面板

1、“行為”面板

若要打開(kāi)“行為”面板，請(qǐng)單擊“設(shè)計(jì)面板”

中的【行為】命令。打開(kāi)系統(tǒng)的“行為”面

說(shuō)明：在上圖中，已附加到當(dāng)前所選網(wǎng)頁(yè)元素

的行為顯示在行為列表中（面板的主區(qū)域），

二按事件以字母順序排列。如果同一個(gè)事件有

多個(gè)動(dòng)作，則將以在列表上出現(xiàn)的順序執(zhí)行

—這些動(dòng)作。如果行為列表中沒(méi)有顯示任何行

為，則沒(méi)有行為附加到當(dāng)前所選的網(wǎng)頁(yè)元素。

2、“行為”面板具有的選項(xiàng)說(shuō)明：一

1）、動(dòng)作（+）是一個(gè)彈出式菜單，其中包含可

以附加到當(dāng)前所選元素的多個(gè)動(dòng)作。當(dāng)您從

此列表中選擇某個(gè)動(dòng)作時(shí)，將出現(xiàn)一個(gè)對(duì)話

框，您可以在其中指定該動(dòng)作的參數(shù)。如果

所有動(dòng)作都灰顯，則沒(méi)有所選元素可以執(zhí)行

的動(dòng)作。

2）、刪除（?）從行為列表中刪除所選的事件

和動(dòng)作。

3）、上下箭頭按鈕將特定事件的所選動(dòng)作在

行為列表中向上或向下移動(dòng)來(lái)改變動(dòng)作執(zhí)

行的順序

4）、事件（當(dāng)您單擊行為列表中所選事件名

稱旁邊的箭頭按鈕時(shí)出現(xiàn)的菜單）是一個(gè)

彈出式菜單，其中包含可以觸發(fā)該動(dòng)作的

所有事件。只有在選擇了行為列表中的某

個(gè)事件時(shí)才顯示此菜單。根據(jù)所選對(duì)象的

不同，顯示的事件也有所不同。如果未顯

示預(yù)期的事件，則檢查是否選擇了正確的

網(wǎng)頁(yè)元素。

5）、顯示事件（“事件”菜單中的子

菜單）指定當(dāng)前行為應(yīng)該在其中起

作用的瀏覽器。通常，較早的瀏覽

器比較新的瀏覽器支持的事件要少，

一般我們選擇IE4.0或以上瀏覽器。

6）、動(dòng)作（或者稱為操作）指的是行

為菜單中的具體動(dòng)作。

熟悉了“行為”面板后，下面來(lái)討論

如何應(yīng)用。

應(yīng)用行為

一、哪些對(duì)象可應(yīng)用行為

可以將“行為”附加到整個(gè)文檔（即附加到

body標(biāo)簽），還可以附加到鏈接、圖像、圖

層、表單元素或多種其他HTML元素等。

--不能將行為附加到純文本。~

二、為網(wǎng)頁(yè)中的元素附加行為的操作步驟如下:

1）、在網(wǎng)頁(yè)上選擇一個(gè)元素，例如一個(gè)圖像或

一個(gè)鏈接。（若要將行為附加到整個(gè)頁(yè)，請(qǐng)

在文檔窗口底部左側(cè)的標(biāo)簽選擇器中單擊

<body>標(biāo)簽。）

2）、單擊“設(shè)計(jì)”面板中的【行為】命令。打開(kāi)

“行為”面板。一

3）、單擊加號(hào)（+）按鈕并從“動(dòng)作”彈出式菜單中

選擇動(dòng)作

注意：DreamweaverMX增加了一項(xiàng)所選HTML元素

的提示功能。具體操作時(shí)要多留意這項(xiàng)提示！

4）、選擇某個(gè)動(dòng)作時(shí)，將出現(xiàn)一個(gè)對(duì)話框，顯示該

動(dòng)作的參數(shù)和說(shuō)明。

5）、為該動(dòng)作輸入?yún)?shù)，然后單擊“確定”。

三、如何將行為附加到純文本

操作方法：若要將行為附加到文本，最簡(jiǎn)單的方法就

是向文本添加一個(gè)空鏈接（在屬性面板中的鏈接文

本框中輸入“#”），然后將行為附加到該鏈接上。

Dreamweaver提供的行為介紹

1、調(diào)用Javasc承=三三^=^^^=^

【調(diào)用Javascript】行為動(dòng)作，能夠讓用戶

使用行為面板去指定一個(gè)自定義功能,或

者當(dāng)一個(gè)事件發(fā)生時(shí)執(zhí)行一段Javascript

代碼,具體操作步驟如下：

1）、在文檔窗口中鍵入中文“關(guān)閉窗口”，

然后將新輸入的文本選定。

2）、為文本添加空鏈接，在其屬性面板的

【鏈接】欄內(nèi)直接輸入。

3）、打開(kāi)行為面板，單擊“+”按鈕，從動(dòng)

作彈出的菜單中選擇【調(diào)用Javascript】

命令，打開(kāi)【調(diào)用Javascript】對(duì)話痣，

二如下圖所示:==::===:=:

4）、鍵入將要執(zhí)行的Javascript代碼或函數(shù)

名，如“window.close。"，用來(lái)關(guān)閉窗口

的命令。單擊“確定”按鈕，完成設(shè)置。

▼設(shè)計(jì)

6）、在行為面板中CSS釋式HTML樣式雷為

選擇【onClick】<a>動(dòng)作

二事件。如右圖所示。事件動(dòng)作

ck慚meaw

7）、預(yù)覽網(wǎng)頁(yè)。當(dāng)

鼠標(biāo)點(diǎn)擊“關(guān)閉窗

口”時(shí)，就會(huì)彈出

信息框，詢問(wèn)用戶

》無(wú)標(biāo)題文檔-licrosuftInternetExplorerI_j□JX,

是否關(guān)閉窗口，打'郝§回建看收藏⑶TMqi利比」的

開(kāi)如右對(duì)話框：后退a國(guó)啟.搜索,收藏夾‘

地址，口：畫file:"/F：/chm/TMF3hlt58a3co.htm#v。轉(zhuǎn)到1^5

8）、單擊“是”按

鈕，將關(guān)閉當(dāng)前瀏

覽器窗口，否則回

到瀏覽器窗口。

2、播放聲音

使用【播放聲音】動(dòng)作來(lái)播放聲音和音樂(lè)

文件。例如，在頁(yè)面載入時(shí)會(huì)自動(dòng)播放一

段動(dòng)聽(tīng)的音樂(lè)L或者當(dāng)鼠標(biāo)點(diǎn)擊按鈕時(shí)會(huì)

發(fā)出聲音，具體的操作步驟如下：

1）、打開(kāi)一個(gè)預(yù)加入背景音樂(lè)的頁(yè)面文檔,

然后打開(kāi)行為面板。

2）、在行為面板中點(diǎn)擊按鈕，從動(dòng)作

彈出的菜單中選擇【播放聲音】命令，打

開(kāi)【播放聲音】對(duì)話框，如下圖所示：

、點(diǎn)擊“瀏覽”按

3)播放聲音岡

鈕選中一個(gè)聲音文舉

確定

或者直接在“播放下播放聲音:,,/others./music.rmiE瀏覽:?二』w

音”域中輸入聲音3幫助

件的路徑和文件名。

二

4）、單擊“確定”按CSSf位［HTML樣式

鈕，完成聲音設(shè)定。二J二J<body>動(dòng)作

5）、在行為面板中加序件動(dòng)作

入了一個(gè)事件為

[onLoad],動(dòng)作為

【播放聲音】，的行

為,如右圖所示：

如果不想當(dāng)網(wǎng)頁(yè)載入時(shí)就播放音樂(lè)，而是想當(dāng)鼠標(biāo)點(diǎn)擊時(shí)再播

放，只要將事件改為【onClick】即可。

3、打開(kāi)瀏覽器窗口

使用打【開(kāi)瀏覽器窗口】行為動(dòng)作，將打開(kāi)

口一個(gè)新的瀏覽器窗口，在其中顯示指定的網(wǎng)

頁(yè)文檔。用戶可以指定這個(gè)新窗口的屬性，

包括窗口尺寸大小、是否可以調(diào)節(jié)大小、是

否有菜單欄等等。在網(wǎng)頁(yè)中的小圖需要放大

時(shí)，可以使用這個(gè)行為，在一個(gè)大窗口中放

置小圖像的放大圖，可將窗口設(shè)置成與圖像

大小相吻合的尺寸，將多余的導(dǎo)航欄、地址

欄、狀態(tài)欄、菜單欄等去掉不顯示。

注意：如果我們不對(duì)窗口屬性進(jìn)行設(shè)置，它

就會(huì)以640X480像素大小打開(kāi)，而且有導(dǎo)航

欄、地址欄、狀態(tài)欄、菜單欄等。

具體的操作步驟如下:

1）、首先在文檔中選定一幅需要放大的圖像。

2）、在行為面板中點(diǎn)擊按鈕，從動(dòng)作彈出菜單

中選擇【打開(kāi)瀏覽器窗口】命令，打開(kāi)【打開(kāi)瀏

二覽器窗口】對(duì)話框。如下圖：二二二=

打開(kāi)瀏覽謠竄口

3）、點(diǎn)擊1按鈕以選擇圖像放大圖。其

他設(shè)置如下:

【窗口寬度】確定窗口寬度的像素值。（這題

我們就以圖像的窗度為標(biāo)準(zhǔn)三二^^

【窗口高度】確定窗口高度的像素值。（這題

我們就以圖像的高度為標(biāo)準(zhǔn)。）

【導(dǎo)航工具欄】包括后退、前進(jìn)、主頁(yè)、刷新

等瀏覽器按鈕的工具欄。

【地址工具欄】瀏覽器中包含網(wǎng)址等工具欄。

【狀態(tài)欄】瀏覽器窗口底部的區(qū)域，顯示剩余

下載時(shí)間，連接指向的網(wǎng)址等。

【菜單條】瀏覽器窗口主菜單，包括文件、

編輯、查看等。

4）、本例中我們只需要輸入圖像的放大圖

一的路徑和文件名，其他項(xiàng)都不選，單擊二

“確定”按鈕，完成設(shè)置。_

5）、動(dòng)作設(shè)置完成以后，還要對(duì)事件進(jìn)行

設(shè)置在彈出的事件菜單中選擇

[onMouseDown]（鼠標(biāo)左鍵按下立即產(chǎn)

生動(dòng)作）

6）、預(yù)覽效果。

4、彈出信息

二【彈出信息】孕作將顯示一個(gè)指定的=

Javascript提示信息框。因?yàn)镴avascript提

示信息框只有一個(gè)按鈕，使用這個(gè)動(dòng)作以

提供給用戶信息，而不是讓它做出選擇。

二在實(shí)際網(wǎng)頁(yè)設(shè)計(jì)中可以使用這個(gè)動(dòng)作來(lái)給二

瀏覽者的一些信息提示。

下面讓我們來(lái)看一下設(shè)置【彈出信息】動(dòng)作

的具體操作步驟。

1）、在文檔窗口中選定圖像，打開(kāi)行為面板。

2）、點(diǎn)擊“+”按鈕，從動(dòng)作彈出菜單中選擇【彈出信

息】命令，打開(kāi)【彈出信息】對(duì)話框，如圖所示：

彈出信息

消息：靖不要衽意下裁此圖片?

3）、在【信息】區(qū)域內(nèi)輸入要提示訪問(wèn)者的文本信息,

單擊“確定”按鈕。

4）、在行為面板中選擇【onMouseUp】事件（按

二下鼠標(biāo)左鍵釋放時(shí)產(chǎn)生動(dòng)作）。如下圖：

css樣式

1J

二J二］＜img＞動(dòng)作

聿件動(dòng)作

onfflouseUpE3眸X1出

5）、預(yù)覽網(wǎng)頁(yè)。點(diǎn)擊鼠標(biāo)右鍵會(huì)彈出信

息框，如圖所示。

口$**也iirm-ietlTn*?rnn<I>pHEIHj

地址冏F\aaa\htm\TMP6m0vaoyt▼P轉(zhuǎn)到隨“

清不要任意下載此圖片?

確定

理我的電腦

一■N

5、改變屬性

使用【改變屬性】動(dòng)作來(lái)改變網(wǎng)頁(yè)

一元素的屬性的值。例如，可改變圖

像的來(lái)源。

下面用“改變圖像的來(lái)源”為例，說(shuō)

明這個(gè)動(dòng)作的使用具體操作步驟如

下：

1)、首先在文檔中插入一幅圖像，在屬性

一面板中為其取名為“mark”。

無(wú)標(biāo)蔻文者Cht?/zzz?)

文件區(qū)|編輯里查看s插入?修改四文字

標(biāo)題無(wú).標(biāo)題文檔

源文件

鏈接?

垂直距1窗口?

口①以水平距i低解析

2）、選定該圖像，打開(kāi)行為面板，點(diǎn)擊“+”

按鈕，從彈出菜單中選擇【改變屬性】命令,

_打開(kāi)【改變屬性】對(duì)話框，如下圖所示。

改變屆性

3）、在【對(duì)象類型】下拉列表中選擇

“IMG,這項(xiàng)是針對(duì)圖像的”。如下圖:

改變屬性

確定

取消

幫助

4）、對(duì)話框中的【命名對(duì)象】變?yōu)橐衙?/p>

的圖像“mark”。

5）、對(duì)話框中【屬性】的選項(xiàng)默認(rèn)狀態(tài)是

二【選擇】，【選擇】下拉列表中只有一

項(xiàng)“src”（文件的路徑）二

6）、右邊下拉列表是支持行為動(dòng)作的瀏覽

二器版本，共有4項(xiàng)選擇：NS3、IE3、二

NS4、IE4o瀏覽器的版本越早，所支持

的行為就越少。

注意：對(duì)熟悉HTML語(yǔ)言的用戶可以選擇

【輸入】項(xiàng)，然后在空白欄內(nèi)設(shè)置圖像

的屬性,如border、width、height等。

7）、假如我們選擇了“src”屬性，那么在【新的

值】欄內(nèi)輸入另外的圖像路徑，如下圖所示：

改變屬性

對(duì)象類型:

命名對(duì)象:

屬性:

O輸入

新的值:Jmeiguil.ipg

8）、單擊“確定”按鈕，完成設(shè)置。

9）、在行為面板中選擇一個(gè)"onMouseOver”事件。

j醞祥至而肛樣式后而_

JkLz￡<img>珈tjdjJ

事件動(dòng)作

ESuHSKB

10）、預(yù)覽網(wǎng)頁(yè)，當(dāng)鼠標(biāo)經(jīng)過(guò)圖像時(shí)，就回調(diào)出第二

幅圖像。

6、交換圖像

【交換圖像】動(dòng)作可以將一個(gè)圖像替換為

另一個(gè)圖像，這是通過(guò)改變圖像的“src”

一屬性達(dá)到的，其實(shí)在上一個(gè)動(dòng)作“改變

屬性”中已經(jīng)介紹了如何改變圖像的

―“src”屬性—二

注意：使用這個(gè)動(dòng)作要求原始圖像和替換

圖像的尺寸（寬和高）完全一致，否則

替換圖像會(huì)發(fā)生收縮或放大。

具體操作步驟如下：

1）、首先在文檔中插入一幅圖像。

2）、在屬