2.1-Section腳本語言Scriptppt課件

1、譚曉陽譚曉陽 南京航空航天大學(xué)計(jì)算機(jī)系南京航空航天大學(xué)計(jì)算機(jī)系網(wǎng)絡(luò)研究室網(wǎng)絡(luò)研究室 : txynaef-china: txynaef-chinaTel: 4802150(home)Tel: 4802150(home) 4892803(office) 4892803(office)Section 4 腳本語言腳本語言Script第第2 章章Script在客戶端的應(yīng)用在客戶端的應(yīng)用Script在客戶端的應(yīng)用在客戶端的應(yīng)用本講內(nèi)容本講內(nèi)容1 1 客戶端瀏覽器與客戶端瀏覽器與DHTMLDHTML2 2 瀏覽器內(nèi)置對象瀏覽器內(nèi)置對象3 3 文檔對象模型文檔對象模型4 4 事件模型事件模型5 5 樣式表對

2、象樣式表對象6 Script6 Script在客戶端的應(yīng)用示例在客戶端的應(yīng)用示例1 客戶端瀏覽器與客戶端瀏覽器與DHTML1.1 客戶端瀏覽器的組件客戶端瀏覽器的組件 在討論客戶端腳本的使用之前在討論客戶端腳本的使用之前,我們先來看看客戶端我們先來看看客戶端瀏覽器的工作機(jī)制瀏覽器的工作機(jī)制,以以Microsoft IE為例為例: 對于最終用戶而言對于最終用戶而言,IE看起來是一個(gè)獨(dú)立的應(yīng)用程序看起來是一個(gè)獨(dú)立的應(yīng)用程序: IEXPLORE.EXE about 60KB 但事實(shí)上但事實(shí)上,IE是由一系列的組件構(gòu)成的是由一系列的組件構(gòu)成的: IEXPLORE.EXE只是一個(gè)作為只是一個(gè)作為cont

3、ainer的小程序的小程序,它為它為其它的組其它的組 件提供了一個(gè)集成框架件提供了一個(gè)集成框架 在這個(gè)框架中包含了以下幾個(gè)重要的組件在這個(gè)框架中包含了以下幾個(gè)重要的組件,如下圖所示如下圖所示1 客戶端瀏覽器與客戶端瀏覽器與DHTML1 客戶端瀏覽器與客戶端瀏覽器與DHTML1.1 客戶端瀏覽器的組件客戶端瀏覽器的組件 WebBrowser對象對象 Microsofts WebBrowser object 由由SHDOCVW.DLL所提供。該組件所提供。該組件 實(shí)現(xiàn)了實(shí)現(xiàn)了Web瀏覽器所應(yīng)該具備的一些基本特征，例如，瀏覽器所應(yīng)該具備的一些基本特征，例如，forward、 back navigat

4、ion, favorites, page refresh, and printing WebBrowser對象本身并不具備顯示對象本身并不具備顯示HTML頁面或者其它類型文檔頁面或者其它類型文檔 （例如（例如pdf 、doc等的能力等的能力 但是，它可以作為一個(gè)但是，它可以作為一個(gè)ActiveX document container ，根據(jù)當(dāng)前文檔，根據(jù)當(dāng)前文檔 的類型來加載相應(yīng)的的類型來加載相應(yīng)的ActiveX document server 。這些。這些ActiveX document server具備對特定類型的文檔進(jìn)行解析和顯示的功能具備對特定類型的文檔進(jìn)行解析和顯示的功能1 客戶端瀏

5、覽器與客戶端瀏覽器與DHTML WebBrowser對象續(xù) 這樣，Microsoft就使得IE成為一個(gè)獨(dú)立于文檔類型的瀏覽器，它 不僅僅能夠?yàn)g覽和操作HTML文檔，還能夠用于瀏覽和操作其它 任何ActiveX document ，例如Word 、Excel等 同時(shí)，WebBrowser對象也不僅僅可以用于Microsoft IE中，用戶 可以和Microsoft IE一樣將WebBrowser對象包含在自己開發(fā)的應(yīng) 用程序中，從而實(shí)現(xiàn)類似于Microsoft IE 的功能，我們在HTTP 中的設(shè)計(jì)的一個(gè)示例程序就采用了這種方法 HTML Viewer 對于HTML文檔而言，WebBrowser

6、會加載Microsofts HTMLViewer （MSHTML.DLL） MSHTML是一個(gè)ActiveX document server ，它具有解析展現(xiàn) HTML文檔的功能，并為其它程序例如：客戶端腳本程序訪 問HTML文檔提供了編程接口1 客戶端瀏覽器與客戶端瀏覽器與DHTML1.1 客戶端瀏覽器的組件客戶端瀏覽器的組件 腳本引擎腳本引擎 雖然雖然HTML Viewer能夠按照能夠按照HTML規(guī)范解析規(guī)范解析HTML， 但它不知但它不知 道如何執(zhí)行腳本語句道如何執(zhí)行腳本語句 當(dāng)當(dāng)HTML Viewer發(fā)現(xiàn)發(fā)現(xiàn)HTML文檔中所嵌入的腳本程序時(shí)，它將根文檔中所嵌入的腳本程序時(shí)，它將根 據(jù)腳

7、本語言類型加載合適的腳本引擎，例如用于據(jù)腳本語言類型加載合適的腳本引擎，例如用于VBScript的的 VBSCRIPT.DLL、 用于用于JScript/JavaScript的的JSCRIPT.DLL， 并將并將 腳本語句傳遞給腳本引擎，由腳本引擎解釋執(zhí)行腳本語句傳遞給腳本引擎，由腳本引擎解釋執(zhí)行 同樣，對于同樣，對于HTML文檔中所嵌入的其它對象，包括文檔中所嵌入的其它對象，包括ActivieX Control Java Applet 以及其它的一些以及其它的一些Pluging ，HTML Viewer也也 無法解析和處理，此時(shí)將會加載相應(yīng)的處理程序無法解析和處理，此時(shí)將會加載相應(yīng)的處理程序

8、Dynamic HTMLnDynamic HTML is a combination of positioning in CSS and a scripting language in order to give life to a page, either creating animation or enhancing interaction.nDynamic HTML is a term used to describe HTML pages with dynamic content.nThere are three components in dynamic HTML:n1. HTMLn

9、2. Cascading Style Sheets (CSS)n3. JavaScriptnThe three components are glued together with DOM, the Document Object Model.DHTMLDHTML, or Dynamic HTML, is a new webtechnology that enables elements inside your webpage, such as text, font, color, size, etc., to bedynamic and change after the page is do

10、wnloaded.Dynamic HTML靜態(tài)靜態(tài)vs.動態(tài)動態(tài)1 客戶端瀏覽器與客戶端瀏覽器與DHTML1.2 DHTML Object Model簡介簡介 DHTML Object Model的地位的地位 在應(yīng)用程序包括腳本程序中可能需要對在應(yīng)用程序包括腳本程序中可能需要對Web瀏覽器以及其瀏覽器以及其 中包含的中包含的HTML文檔進(jìn)行操作文檔進(jìn)行操作 一種很好的解決方案是采用面向?qū)ο蟮姆绞綖橐环N很好的解決方案是采用面向?qū)ο蟮姆绞綖閃eb瀏覽器和瀏覽器和 HTML文檔提供了接口。如下圖文檔提供了接口。如下圖 通過這個(gè)接口，應(yīng)用程序只要簡單地設(shè)置對象的屬性或調(diào)通過這個(gè)接口，應(yīng)用程序只要簡單地

11、設(shè)置對象的屬性或調(diào) 用對象的方法就可以操作用對象的方法就可以操作Web瀏覽器，以及其中包含的瀏覽器，以及其中包含的 HTML文檔文檔 這樣這樣Web頁面從服務(wù)器端下載到客戶端以后，頁面的內(nèi)容頁面從服務(wù)器端下載到客戶端以后，頁面的內(nèi)容 樣式等仍然能夠隨時(shí)變換，因此該接口被稱為樣式等仍然能夠隨時(shí)變換，因此該接口被稱為DHTML Object Model1 客戶端瀏覽器與客戶端瀏覽器與DHTML1 客戶端瀏覽器與客戶端瀏覽器與DHTML DHTML Object Model的組成 DHTML Object Model由一系列的對象組成，這些對象可以分為以下兩種類型 關(guān)于Web Browser的對象

12、在DHTML Object Model中，瀏覽器以及其中所包含的地址、 歷史列表、框架文檔等各個(gè)部分均被抽象為相應(yīng)的對象 腳本等應(yīng)用程序可以使用這些對象接口來訪問和操縱Web瀏 覽器 關(guān)于HTML Document的對象 一個(gè)HTML文檔是一個(gè)流式的文件，其中HTML指定了文 檔的內(nèi)容和邏輯結(jié)構(gòu)，而CSS則給出了文檔的展現(xiàn)信息 為了便于應(yīng)用程序?qū)ξ臋n的訪問和操作文檔以及其中的各 種組成成分元素也被抽象為相應(yīng)的對象，這些對象統(tǒng)稱 為Document Object Model1 客戶端瀏覽器與客戶端瀏覽器與DHTML1.2 DHTML Object Model簡介簡介 DHTML Object M

13、odel與腳本與腳本 DHTML是近年來是近年來Web應(yīng)用開發(fā)技術(shù)中最振奮人心也最具實(shí)用性應(yīng)用開發(fā)技術(shù)中最振奮人心也最具實(shí)用性 的創(chuàng)新之一。它的實(shí)現(xiàn)是的創(chuàng)新之一。它的實(shí)現(xiàn)是HTML、 CSS 、DHTML Object Model、 腳本等多種技術(shù)的綜合腳本等多種技術(shù)的綜合 如果將用戶看成是主體，如果將用戶看成是主體，Web頁面看作是客體，那么頁面看作是客體，那么DHTML object model是使得客體變得容易操縱的一種機(jī)制，而腳本則是主是使得客體變得容易操縱的一種機(jī)制，而腳本則是主 體用于操縱客體的一種工具，是實(shí)際促成頁面按照用戶的意圖進(jìn)體用于操縱客體的一種工具，是實(shí)際促成頁面按照用戶

14、的意圖進(jìn) 行動態(tài)變化的程序行動態(tài)變化的程序2 瀏覽器內(nèi)置對象瀏覽器內(nèi)置對象 Web文檔瀏覽器和WSH一樣，它也是腳本的一種宿主，因而，Web文檔瀏覽器提供了一些腳本語言程序可以直接使用的內(nèi)置對象。如下圖所示，這些對象分為兩層。 在對象模型的頂層，僅有一個(gè)對象Window object window object是對Web瀏覽器的抽象 Window object 的屬性、方法、事件描述了Web瀏覽器所具備的各 種特點(diǎn)和功能 對象模型的第二層包括Frames object 、History object 、Location object Navigator object 、Document obj

15、ect 、Screen object 、Event object等 這些object均是Window object的成員 它們分別表示W(wǎng)eb瀏覽器中所包含的地址、歷史列表、框架、文 檔等各個(gè)部分下面我們對上述對象進(jìn)行簡要介紹2 瀏覽器內(nèi)置對象瀏覽器內(nèi)置對象2 瀏覽器內(nèi)置對象瀏覽器內(nèi)置對象 (1) Window Object Window Object是Web瀏覽器提供給腳本等應(yīng)用程序直接使用的唯 一對象、它代表著當(dāng)前腳本程序所運(yùn)行的Web瀏覽器宿主環(huán)境 通過使用Window Object、 腳本程序可以實(shí)現(xiàn)以下功能 獲取或者設(shè)置當(dāng)前瀏覽器窗口的有關(guān)特征或狀態(tài)、例如：窗 口中當(dāng)前網(wǎng)頁的URL、

16、狀態(tài)欄、信息當(dāng)前窗口的父窗口、當(dāng) 前窗口的頂層窗口等 通過Window Object來訪問Web瀏覽器對象模型中的其它對象， 例如，瀏覽器中包含的框架、瀏覽器中所顯示的文檔、閱讀 器的歷史列表等 控制瀏覽器的操作，例如，顯示對話框、設(shè)置/清除定時(shí)器、 滾動/移動窗口、在當(dāng)前窗口中打開新的網(wǎng)頁、在一個(gè)新窗口 中打開網(wǎng)頁等2 瀏覽器內(nèi)置對象瀏覽器內(nèi)置對象 (1) Window Object (續(xù)) Window Object包含豐富的屬性和方法，同時(shí)能夠響應(yīng)各種事件。有關(guān)這些方面的詳細(xì)信息請參見MSDN DHTML References 由于Window Object是Web瀏覽器提供給腳本程序直

17、接使用的唯一對象。因此在使用時(shí)可以將其省略，而直接使用其屬性或方法名稱即可，但是為了保持程序的可讀性，最好能夠使用前綴 “window.” 示例參見window document2 瀏覽器內(nèi)置對象瀏覽器內(nèi)置對象 (2) Frames object當(dāng)Web瀏覽器中包含若干個(gè)框架由HTML的FRAME元素定義時(shí)，這 些框架被表示為對象模型中的Frames object 通過訪問Windows object的frames屬性，就可以得到Web瀏覽器中的Frames object Frames object是一個(gè)集合，其中的每個(gè)成員代表了一個(gè)框架 每個(gè)框架事實(shí)上也是一個(gè)Window object， 因

18、此可以象使用 Window object那樣來使用每個(gè)框架 示例參見loc&his-index loc&his2 瀏覽器內(nèi)置對象瀏覽器內(nèi)置對象 (3) History object History object包含了Web瀏覽器所訪問過的URL 歷史列表的有關(guān)信息，通過使用History object ，腳本程序可以實(shí)現(xiàn)“Back”“Forward等功能 參見示例loc&his-index loc&his (4) Location object Location object表示W(wǎng)eb瀏覽器當(dāng)前所瀏覽的Web頁面的地址 通過使用Location Object的屬性和方法腳本程序可以實(shí)現(xiàn)以下 功

19、能 獲取Web瀏覽器當(dāng)前所瀏覽的Web頁面地址的有關(guān)信息，包 括完整的URL 、URL中的主機(jī)端口等 設(shè)置Web瀏覽器當(dāng)前所瀏覽的Web頁面地址，此時(shí)瀏覽器會 立刻打開相應(yīng)的頁面 參見示例loc&his-index loc&his2 瀏覽器內(nèi)置對象瀏覽器內(nèi)置對象 (5) Navigator object Navigator object包含了有關(guān)客戶端Web瀏覽器的信息 參見示例navigator (6) Screen object Screen object包含了有關(guān)客戶端顯示器和顯示能力的信息 參見示例screen3 Document object與文檔對象模型與文檔對象模型 DOM簡介

20、在DHTML中，Web瀏覽器采用面向?qū)ο蟮姆椒▉砻枋霎?dāng)前所顯示的文檔，這種描述方法稱之為文檔對象模型Document ObjectModel） 文檔對象模型是DHTML Object Model中的一個(gè)重要組成部分，它為訪問HTML文檔中的各種元素和CSS信息提供了接口 從某種意義上來說，Document Object Model是DHTML的真正核心內(nèi)容3 Document object與文檔對象模型與文檔對象模型 document object簡介 文檔對象模型最常見的表現(xiàn)形式是以document object作為根結(jié)點(diǎn) 的樹狀結(jié)構(gòu)。document object是一個(gè)全局的對象，表示W(wǎng)e

21、b瀏覽 器中當(dāng)前所顯示的文檔 利用document object ，腳本程序可以獲取瀏覽器中當(dāng)前顯示文檔 的有關(guān)信息，訪問文檔中的各個(gè)HTML元素和文本，甚至處理各 個(gè)HTML元素上發(fā)生的各種事件。 由于window object是Web瀏覽器提供給腳本程序直接使用的唯一 對象，因此document object也是作為window object的屬性成員對象來供腳本程序使用的。3 Document object與文檔對象模型與文檔對象模型3.1 HTML文檔樹文檔樹 (1) 結(jié)點(diǎn)與層次結(jié)點(diǎn)與層次 HTML文檔是存儲在磁盤上的流式文件。為了便于展現(xiàn)和文檔是存儲在磁盤上的流式文件。為了便于展現(xiàn)和

22、操縱操縱 Web瀏覽器根據(jù)瀏覽器根據(jù)HTML規(guī)范將文檔解析成一棵文檔樹規(guī)范將文檔解析成一棵文檔樹建立在內(nèi)建立在內(nèi) 存中）存中） HTML文檔樹反映了文檔樹反映了HTML文檔的內(nèi)容和結(jié)構(gòu)。圖中給出文檔的內(nèi)容和結(jié)構(gòu)。圖中給出了了HTML文檔樹的一個(gè)示例僅給出結(jié)點(diǎn)的元素種類，文檔樹的一個(gè)示例僅給出結(jié)點(diǎn)的元素種類，省略了元素屬性方法等）省略了元素屬性方法等） HTML文檔中的每個(gè)元素對應(yīng)于樹上的一個(gè)結(jié)點(diǎn)，結(jié)點(diǎn)中文檔中的每個(gè)元素對應(yīng)于樹上的一個(gè)結(jié)點(diǎn)，結(jié)點(diǎn)中包含了包含了 有關(guān)該元素的有關(guān)該元素的id、name、 tag等各種屬性信息等各種屬性信息 在在HTML文檔中，各個(gè)元素之間的包含關(guān)系對應(yīng)于文檔樹文檔

23、中，各個(gè)元素之間的包含關(guān)系對應(yīng)于文檔樹上結(jié)點(diǎn)上結(jié)點(diǎn) 之間的父之間的父/子層次關(guān)系。子層次關(guān)系。 顯然，結(jié)構(gòu)化的顯然，結(jié)構(gòu)化的HTML文檔樹比流式的文檔樹比流式的HTML文檔更易于文檔更易于訪問和訪問和 操作操作3 Document object與文檔對象模型與文檔對象模型3 Document object與文檔對象模型與文檔對象模型 (2) 元素對象 在文檔樹上，每個(gè)結(jié)點(diǎn)都是一個(gè)對象，相同種類的HTML元素所 對應(yīng)的結(jié)點(diǎn)的對象類型相同 例如，一個(gè)HTML文檔中包含5個(gè)“IMG元素，那么這5個(gè)元素對 應(yīng)于文檔樹上的5個(gè)結(jié)點(diǎn)，這5個(gè)結(jié)點(diǎn)都是“IMG類型的對象 DHTML中的元素對象類型和HTML規(guī)

24、范中的元素類型幾乎是 一一對應(yīng)的 每種類型的元素對象都有其相應(yīng)的屬性和方法。如下圖3 Document object與文檔對象模型與文檔對象模型3 Document object與文檔對象模型與文檔對象模型 (2) 元素對象 這些屬性/方法可以大致概括為以下兩類 公有屬性/方法：雖然DHTML中包含有近百種不同的元素對象類型，但它們一般都具有一些共同的屬性，例如id、 className、 style、 tagName、 lang 以及事件屬性onclick、onmousedown, etc. 這與HTML規(guī)范非常類似。有關(guān)詳情請參見MSDN DHTML References 特有屬性/方法：

25、除了上述這些共有的屬性，各種元素對象還 有自己所特有的屬性。例如“A元素對象所具有的href屬性、 “IMG元素對象所具有的src屬性、以及各種ActiveX control和 Applet所具有的特定屬性等等。我們在HTML 中已經(jīng)對各 種元素的特有屬性進(jìn)行了比較詳細(xì)的介紹，此處不再討論 有關(guān)詳情請參見MSDN DHTML References3 Document object與文檔對象模型與文檔對象模型3.2 文檔樹中對象的引用文檔樹中對象的引用 使用文檔對象模型將使用文檔對象模型將HTML文檔表示文檔樹后，可以通過訪問文文檔表示文檔樹后，可以通過訪問文 檔樹中的結(jié)點(diǎn)來獲取文檔中各個(gè)元素的

26、信息，也可以通過操縱文檔樹中的結(jié)點(diǎn)來獲取文檔中各個(gè)元素的信息，也可以通過操縱文 檔樹中的結(jié)點(diǎn)來改變文檔的內(nèi)容、展現(xiàn)等檔樹中的結(jié)點(diǎn)來改變文檔的內(nèi)容、展現(xiàn)等 在腳本程序中，要引用文檔樹中的結(jié)點(diǎn)對象可以采用以下三種方在腳本程序中，要引用文檔樹中的結(jié)點(diǎn)對象可以采用以下三種方 式式 元素父子關(guān)系元素父子關(guān)系 元素快速索引表元素快速索引表 元素標(biāo)識符元素標(biāo)識符/名稱名稱3 Document object與文檔對象模型與文檔對象模型 元素父子關(guān)系 Web瀏覽器將document object作為一個(gè)全局對象提供給腳本程序 使用，而文檔樹又是以document object作為根結(jié)點(diǎn)。 腳本程序可以從docu

27、ment object出發(fā)，遍歷文檔樹的各個(gè)層次， 直到獲得所需要訪問或操縱的結(jié)點(diǎn)對象為止 document object以及文檔樹上所有元素對象均支持以下三個(gè)屬性 children ：返回一個(gè)集合，其中包含了當(dāng)前對象的所有兒子元素。腳本程序可以象訪問數(shù)組成員一樣來訪問集合中包含的每個(gè)成員。當(dāng)集合為空時(shí)說明當(dāng)前對象是文檔樹上的頁結(jié)點(diǎn)。參見示例 all 與children類似，也返回一個(gè)集合，但其中包含的是當(dāng)前對象的所有兒子元素。 parentElement 返回當(dāng)前對象的父元素。由于document object是文檔樹的根結(jié)點(diǎn)，因此不支持該屬性 參見示例refobject3 Document

28、 object與文檔對象模型與文檔對象模型 元素快速索引表 腳本程序在對文檔樹進(jìn)行訪問時(shí)，可能需要經(jīng)常地訪問文檔中包 含的某類元素，例如“超鏈” “表單” “圖像等 文檔對象模型提供了以下兩種途徑來供腳本程序訪問文檔樹或者 其中某個(gè)子樹上的所包含的某種特定類型的元素。這樣，腳本程 序就不需要遍歷整個(gè)文檔樹 doucment object具有一些屬性，包括anchors, applets, forms, images, links, scripts等。每個(gè)屬性返回的是一個(gè)集合，分別代 表HTML文檔樹中包含的所有的anchors, applets, forms, images, links, s

29、cripts等類型的結(jié)點(diǎn) doucment object以及所有元素對象的all屬性和children屬性均 是一個(gè)集合，該集合支持tags方法，該方法的輸入?yún)?shù)為代 表“元素種類的字符串。該方法能夠從all/ children集合中返 回由特定種類的元素所組成的子集合。3 Document object與文檔對象模型與文檔對象模型 例如：doucment.all.tags(“IMG”)返回的是文檔中所包含的所有 的img結(jié)點(diǎn)，等價(jià)于doucment.images object1.all.tags(“IMG”) 返回的是結(jié)點(diǎn)object1下包含的所有的img子孫結(jié)點(diǎn)，而 object1.chi

30、ldren.tags(“IMG”)返回的是結(jié)點(diǎn)object1下的包含的 所有的img兒子結(jié)點(diǎn) 參見示例refobject 元素標(biāo)識符/名稱 在HTML文檔中，有些元素被設(shè)定了id或者name屬性，這樣，它 們在文檔樹上對應(yīng)的結(jié)點(diǎn)的id或name屬性也為非空值。 此時(shí)，id或name屬性的值就會被作為這些結(jié)點(diǎn)的對象變量名，而 且這些對象變量名在整個(gè)文檔的名字空間內(nèi)是有效的。 腳本程序可以直接以“window.對象變量名的形式來訪問相應(yīng)的結(jié) 點(diǎn)對象。 參見示例refobject4 事件模型與事件模型與event object4.1 事件模型事件模型 事件事件 所謂所謂“事件事件” （Event）

31、就是指用戶對文檔中的某個(gè)對象執(zhí)行了某就是指用戶對文檔中的某個(gè)對象執(zhí)行了某 種操作所產(chǎn)生的動作，比如點(diǎn)擊超鏈元素、在頁面上移動鼠標(biāo)種操作所產(chǎn)生的動作，比如點(diǎn)擊超鏈元素、在頁面上移動鼠標(biāo) 在表單的文本框控件中輸入、提交表單等都可以視為事件在表單的文本框控件中輸入、提交表單等都可以視為事件 這些事件可以分為以下三類這些事件可以分為以下三類 Web頁面中所有元素均能夠觸發(fā)的一些標(biāo)準(zhǔn)的鼠標(biāo)頁面中所有元素均能夠觸發(fā)的一些標(biāo)準(zhǔn)的鼠標(biāo)/鍵盤事件鍵盤事件 某些能夠接收焦點(diǎn)的元素均能夠觸發(fā)的一些事件某些能夠接收焦點(diǎn)的元素均能夠觸發(fā)的一些事件 特定的元素所能夠觸發(fā)的一些獨(dú)特的事件特定的元素所能夠觸發(fā)的一些獨(dú)特的事件

32、4 事件模型與事件模型與event object Web頁面中所有元素均能夠觸發(fā)的一些標(biāo)準(zhǔn)的鼠標(biāo)/鍵盤事件包括 onkeydown 用戶按下某個(gè)按鍵 onkeyup 用戶松開某個(gè)按鍵 onmousedown 用戶按下鼠標(biāo)按鈕 onmouseup 用戶松開鼠標(biāo)按鈕 onclick 用戶點(diǎn)擊鼠標(biāo)按鈕或在表單中的按鈕控件上按 下按鍵或在表單中的checkbox radio等控件上按 下按鍵等等 ondblclick 用戶雙擊鼠標(biāo)按鈕 onmouseover 用戶將鼠標(biāo)移到某個(gè)元素上 onmousemove 用戶在某個(gè)元素上移動鼠標(biāo) onmouseout 用戶將鼠標(biāo)移出某個(gè)元素4 事件模型與事件模型與

33、event objectn 某些能夠接收焦點(diǎn)的元素均能夠觸發(fā)的一些事件n onfocus 當(dāng)用戶使用按鍵或者鼠標(biāo)將焦點(diǎn)移動按鈕、n 超鏈、文本框等元素上時(shí)n onblur 當(dāng)用戶使用按鍵或者鼠標(biāo)將焦點(diǎn)從按鈕、超n 鏈、文本框等元素上移開時(shí)，F(xiàn)ires when an object, such as an button or check box, loses the input focusn 參見示例eventn 特定的元素所能夠觸發(fā)的一些獨(dú)特的事件n FORM元素所具有的onreset/onsubmit事件用戶提交/重置表n 單）n INPUT SELECT TEXTAREA元素所具有的onc

34、hange事件n （用戶改變了表單中輸入控件的值）n 參見示例event4 事件模型與事件模型與event object (2)使用腳本來處理事件 HTML文檔樹上的每個(gè)結(jié)點(diǎn)對應(yīng)于各個(gè)HTML元素都具有事 件屬性 在HTML文檔中，通過設(shè)置元素結(jié)點(diǎn)的事件屬性，可以將該元素 的相應(yīng)事件與特定的腳本程序關(guān)聯(lián)起來 客戶端瀏覽器以事件驅(qū)動的方式運(yùn)行。當(dāng)用戶與瀏覽器中打開的 HTML文檔進(jìn)行交互時(shí)，會觸發(fā)相應(yīng)元素的特定事件，客戶端瀏 覽器會調(diào)用相關(guān)的腳本程序來處理該事件。4 事件模型與事件模型與event object (3)Event Bubble 在DHTML中，很多“事件能夠沿著Document

35、Object Model中的 元素層次自底向上傳播，就像“氣泡從水下冒到水上一樣，也就 是說發(fā)生在某個(gè)元素上的事件， 首先由該元素自身進(jìn)行處理調(diào)用該元素所擁有的相應(yīng)的腳 本程序） 然后由該元素的父元素進(jìn)行處理，如此重復(fù)直到最終由 document object （DOM對象模型的根結(jié)點(diǎn)進(jìn)行處理 參見示例event4 事件模型與事件模型與event object (3)Event Bubble （續(xù)） 在DHTML中，大多數(shù)元素所共有的標(biāo)準(zhǔn)的鼠標(biāo)/鍵盤事件都具備 “Event Bubble的特性 特定元素所能夠觸發(fā)的一些獨(dú)特事件通常并不能夠“Bubble”。 此 時(shí)這些事件只能夠由觸發(fā)事件的元素

36、本身進(jìn)行處理 FORM元素的onsubmit/onreset 事件 能夠接收焦點(diǎn)的元素按鈕、超鏈、文本框等的 onblur/onfocus事件 FORM中的控件元素TEXTAREA、 SELECT INPUT等） 所具有的onchange事件 即使是一些具備“Event Bubble特性的事件，HTML文檔的作者有 時(shí)也可能希望該事件并不一定按照缺省的方式“bubble up” ，為此 DHTML允許在事件的腳本程序中取消當(dāng)前事件的“bubble up”。 詳情請參見event object4 事件模型與事件模型與event object (4)Event Action 當(dāng)用戶的操作觸發(fā)了HT

37、ML文檔中某個(gè)元素的某個(gè)事件時(shí)，閱讀 器會產(chǎn)生一些缺省的動作，例如 當(dāng)超鏈元素上發(fā)生onclick事件時(shí)，瀏覽器將會打開該超鏈元 素所指向的目標(biāo)Web頁面 當(dāng)表單元素上發(fā)生onsubmit事件時(shí)，瀏覽器會將表單中的數(shù) 據(jù)提交給服務(wù)器端的應(yīng)用程序 有時(shí)，HTML文檔的作者可能希望當(dāng)用戶與HTML文檔進(jìn)行交互 時(shí)，瀏覽器并不一定按照缺省的方式進(jìn)行動作，例如，當(dāng)用戶在 表單中填入的數(shù)據(jù)不合法時(shí)，即使用戶點(diǎn)擊submit按鈕，該表單 也不會被提交給服務(wù)器，為此DHTML允許在事件的腳本程序 中取消瀏覽器的缺省動作，詳情請參見event object。4 事件模型與事件模型與event object4.

38、2 事件對象事件對象 event object是是DHTML event model的一個(gè)核心部分。它是一個(gè)全的一個(gè)核心部分。它是一個(gè)全 局的對象，表示局的對象，表示W(wǎng)eb瀏覽器中當(dāng)前所發(fā)生的事件，例如，用戶在瀏覽器中當(dāng)前所發(fā)生的事件，例如，用戶在 Web頁面上的某個(gè)頁面上的某個(gè)HTML元素上點(diǎn)取了鼠標(biāo)或者按下了按鍵等。元素上點(diǎn)取了鼠標(biāo)或者按下了按鍵等。 由于由于event object是代表是代表Web瀏覽器中瀏覽器中“當(dāng)前事件的一個(gè)全局對象，當(dāng)前事件的一個(gè)全局對象， 因而，因而，event object只能夠用于對事件進(jìn)行處理的腳本程序中。只能夠用于對事件進(jìn)行處理的腳本程序中。 此外，由于

39、此外，由于window object是是Web瀏覽器提供給腳本程序直接使用瀏覽器提供給腳本程序直接使用 的唯一對象，因而，的唯一對象，因而，event object也是作為也是作為window object的屬性的屬性 （成員對象來供腳本程序使用的（成員對象來供腳本程序使用的4 事件模型與事件模型與event object4.2 事件對象事件對象 (1) 使用使用event object來獲取來獲取“當(dāng)前事件的詳細(xì)信息當(dāng)前事件的詳細(xì)信息 event object提供了有關(guān)提供了有關(guān)“當(dāng)前事件的各種信息，包括，發(fā)生該事當(dāng)前事件的各種信息，包括，發(fā)生該事 件的目標(biāo)元素、事件發(fā)生時(shí)鍵盤上件的目標(biāo)元素

40、、事件發(fā)生時(shí)鍵盤上ctrl、 alt 、shift等按鍵的狀態(tài)、等按鍵的狀態(tài)、 鼠標(biāo)的位置，以及各個(gè)按鈕的狀態(tài)等鼠標(biāo)的位置，以及各個(gè)按鈕的狀態(tài)等 這些信息都被作為這些信息都被作為event object的屬性封裝在的屬性封裝在event object中，包括中，包括 srcElement ：給出觸發(fā)：給出觸發(fā)“當(dāng)前事件的當(dāng)前事件的“HTML元素對象元素對象 altKey/ctrlKey/shiftKey ：給出：給出“當(dāng)前事件發(fā)生時(shí)當(dāng)前事件發(fā)生時(shí) ALT/CTRL/SHIFT等按鍵的狀態(tài)布爾值）等按鍵的狀態(tài)布爾值） KeyCode： 給出觸發(fā)給出觸發(fā)“當(dāng)前事件的鍵盤按鍵的編碼值，該屬當(dāng)前事件的

41、鍵盤按鍵的編碼值，該屬 性通常用于性通常用于onkeydown/onkeyup/onkeypress等事件中等事件中4 事件模型與事件模型與event object (1) 使用event object來獲取“當(dāng)前事件的詳細(xì)信息續(xù)） button ：給出觸發(fā)“當(dāng)前事件發(fā)生時(shí)鼠標(biāo)按鈕的狀態(tài)數(shù)字值， 1 Left button、 2 Right button 、4 Middle button is pressed ）。該屬性通常用于onmousedown / onmouseup / onmousemove等事件中 offsetX/offsetY ：給出“當(dāng)前事件發(fā)生時(shí)，鼠標(biāo)點(diǎn)擊點(diǎn)在目標(biāo) 元素內(nèi)的坐

42、標(biāo)位置 clientX/clientY ：給出“當(dāng)前事件發(fā)生時(shí)，鼠標(biāo)點(diǎn)擊點(diǎn)在窗口 客戶區(qū)中的坐標(biāo)位置 screenX/screenY ：給出“當(dāng)前事件發(fā)生時(shí)，鼠標(biāo)點(diǎn)擊點(diǎn)在屏 幕中的坐標(biāo)位置4 事件模型與事件模型與event object (1) 使用event object來獲取“當(dāng)前事件的詳細(xì)信息續(xù) 事件處理的腳本程序可以通過訪問這些屬性來獲得相應(yīng)的狀態(tài)信 息。參見示例event 特別，地利用event object以及事件所具備的“event bubble特征， 用戶可以不必為每個(gè)元素對象設(shè)置其事件屬性，而只需要在文檔 對象樹的某個(gè)層次上設(shè)置事件屬性，那么當(dāng)其下層次中所有結(jié)點(diǎn) 發(fā)生的相應(yīng)事

43、件時(shí)，都會調(diào)用處理該事件的腳本程序。腳本程序 可以通過訪問event object的各種屬性來獲知該事件具體發(fā)生在那 個(gè)元素結(jié)點(diǎn)上。 參見示例event4 事件模型與事件模型與event object (2) 使用event object來改變event bubble 前面我們談到在DHTML中很多事件均具備“Event Bubble特 性，而Web頁面的作者可能有時(shí)會希望取消這種特性，即，當(dāng)事件 沿著文檔對象樹自底向上傳播到某個(gè)層次后不再繼續(xù)上傳 event object提供了cancelBubble屬性。在處理事件的腳本程序中， 可以通過設(shè)置該屬性的值來指定該事件是否繼續(xù)向上傳播 缺省情況

44、下cancelBubble被設(shè)置為FALSE， 當(dāng)前事件將繼 續(xù)向更高的一層傳播 當(dāng)cancelBubble被設(shè)置為TRUE時(shí)，當(dāng)前事件將不會再上傳， 這樣就不會觸發(fā)更高層次的事件處理程序 參見示例event4 事件模型與事件模型與event object (3) 使用event object來改變event action 前面我們談到，當(dāng)用戶的操作觸發(fā)了HTML文檔中某個(gè)元素的某 個(gè)事件時(shí)，瀏覽器會產(chǎn)生一些缺省的動作，而Web頁面的作者可 能有時(shí)會希望取消瀏覽器的缺省動作 event object提供了returnValue屬性，在處理事件的腳本程序中 可以通過設(shè)置該屬性的值來指定瀏覽器是否

45、執(zhí)行缺省的動作 在默認(rèn)情況下returnValue被設(shè)置為TRUE ，在事件處理程序 執(zhí)行結(jié)束后瀏覽器將會繼續(xù)執(zhí)行缺省的動作 當(dāng)returnValue被設(shè)置為FALSE時(shí)，瀏覽器將不再繼續(xù)執(zhí)行缺 省的動作 參見示例event5 樣式對象樣式對象5.1 Style Object 在HTML規(guī)范中每種元素幾乎都具有style屬性，用于指定該元 素的展現(xiàn)樣式信息 與此相對應(yīng)，在DHTML中每個(gè)元素對象也都具有style屬性， 即object.style style屬性也是一個(gè)對象類型的變量，即它是元素對象的成員對象。 因而，style對象也具有相應(yīng)的屬性和方法。如下圖5 樣式表對象樣式表對象5.1

46、Style Object 續(xù) 在腳本程序中，可以通過設(shè)置object.style的屬性，或者調(diào)用其方法 來改變元素對象的樣式信息，從而相應(yīng)地改變其展現(xiàn)形式，實(shí)現(xiàn) 動態(tài)文檔的效果。例如，當(dāng)鼠標(biāo)移動到某個(gè)段落上時(shí)，將其反顯 以突出其內(nèi)容，只要在腳本程序中改變對應(yīng)的pobj.style的前景和 背景顏色屬性即可。 參見示例style/style 在DHTML中，style類型的對象具有近百個(gè)屬性，事實(shí)上這些 屬性和CSS規(guī)范中給出的CSS屬性幾乎是一一對應(yīng)的，因而，理 解了CSS規(guī)范也就可以來使用sytle對象 有關(guān)sytle對象的詳細(xì)信息請參見MSDN DHTML References5 樣式表對象樣式表對象5.2 CSS提供的樣式特征 CSS （Cascading Style Sheets） 是W3C所開發(fā)的一種樣式表語言， 它為HTML文檔中的元素提供了各種樣式屬性Attribute 這些屬性大致可以分為以下幾種類型 Font Properties ：元素的字體、大小、修飾等，參見示例 style/css Text Properties ：元素的對齊、縮進(jìn)、空白、大小寫等，參見 示例style/css Color Properties ：元素的前景、背景、顏色等參見示例 style/css Layout Properties ：元素的邊緣、邊框、填充等。