1、第7章 事件處理【學習目標】【學習目標】 事件是用戶在訪問頁面時執行的操作。當瀏覽器探測到一個事件時，比如鼠標點擊或按鍵，它可以觸事件是用戶在訪問頁面時執行的操作。當瀏覽器探測到一個事件時，比如鼠標點擊或按鍵，它可以觸發與這個事件相關聯的發與這個事件相關聯的JavaScriptJavaScript對象，這些對象稱為事件處理程序。事件處理是一項重要技術，它對象，這些對象稱為事件處理程序。事件處理是一項重要技術，它包含了用戶與頁面的所有交互。通過本章的學習，讀者可以達到以下學習目的：包含了用戶與頁面的所有交互。通過本章的學習，讀者可以達到以下學習目的：了解了解什么是事件以及事件的調用什么是事件以及

2、事件的調用了解常用事件了解常用事件掌握鼠標鍵盤事件掌握鼠標鍵盤事件掌握頁面事件掌握頁面事件掌握表單事件掌握表單事件掌握滾動字幕事件掌握滾動字幕事件掌握編輯事件掌握編輯事件【學習導航】【學習導航】 本章首先介紹什么是事件以及事件的調用，并以列表的形式給出了常用事件，然后重點介紹鼠標鍵盤本章首先介紹什么是事件以及事件的調用，并以列表的形式給出了常用事件，然后重點介紹鼠標鍵盤事件、頁面事件、表單事件、滾動字幕事件和編輯事件。本章在書中的學習位置如圖事件、頁面事件、表單事件、滾動字幕事件和編輯事件。本章在書中的學習位置如圖7 7.1所示。所示。 JavaScript語言基礎JavaScript基本語句

3、函數對象編程事件處理瀏覽器對象CSS+DIV技術Ajax技術JavaScript概述了解JavaScript環境要求及編寫工具關鍵字和標識符數據類型、變量、常量、運算符等對象概述常用對象CSS簡介樣式定義與使用CSS+DIV美化與布局頁面Ajax概述實現Ajax的基本步驟用Ajax實現無刷新廣告輪顯編寫第一個程序HTML文檔HTML文檔基礎常用標記條件語句、循環語句和跳轉語句等了解函數函數的定義與調用等常用內置函數事件基本概念常用事件窗口對象文檔對象表單對象【知識框架】【知識框架】 本章學習內容知識框架如圖本章學習內容知識框架如圖7.2所示。所示。 事件處理事件的基本概念鼠標鍵盤事件頁面事件表

4、單事件滾動字幕事件編輯事件本章目錄n7.1 事件的基本概念事件的基本概念 n7.2 鼠標鍵盤事件鼠標鍵盤事件 n7.3 頁面事件頁面事件 n7.4 表單事件表單事件 n7.5 滾動字幕事件滾動字幕事件 n7.6 編輯事件編輯事件 7.1 事件的基本概念事件的基本概念 n 什么是事件 n 事件處理程序的調用 n JavaScript的常用事件 什么是事件事件是用戶在訪問頁面時執行的操作。當瀏覽器探測到一個事件時，比如鼠標點擊或按鍵，事件是用戶在訪問頁面時執行的操作。當瀏覽器探測到一個事件時，比如鼠標點擊或按鍵，它可以觸發與這個事件相關聯的它可以觸發與這個事件相關聯的JavaScriptJavaS

5、cript對象，這些對象稱為事件處理程序。事件處理對象，這些對象稱為事件處理程序。事件處理是一項重要技術，它包含了用戶與頁面的所有交互。是一項重要技術，它包含了用戶與頁面的所有交互。事件處理程序的調用在使用事件處理程序對頁面進行操作時，最主要的是如何通過對象的事件來指定事件處理程序，在使用事件處理程序對頁面進行操作時，最主要的是如何通過對象的事件來指定事件處理程序，其指定方式主要有三種方法：其指定方式主要有三種方法：（1 1）通過）通過HTMLHTML標記使用事件標記使用事件該方法是直接在該方法是直接在HTMLHTML標記中指定事件處理程序，例如在標記中指定事件處理程序，例如在 body和和

6、input標記中指定。標記中指定。在以上語法中的事件處理程序可以是在以上語法中的事件處理程序可以是JavaScriptJavaScript語句，也可是自定義函數，如果是語句，也可是自定義函數，如果是JavaScriptJavaScript語句，可以在語句的后面以分號（語句，可以在語句的后面以分號（; ;）作為分隔符，執行多條語句。）作為分隔符，執行多條語句。例例7.1 7.1 在頁面加載完成后將彈出一個在頁面加載完成后將彈出一個“歡迎進入本網頁歡迎進入本網頁”的對話框，在用戶退出頁面后，彈出的對話框，在用戶退出頁面后，彈出一個一個“謝謝瀏覽謝謝瀏覽”對話框。代碼如下：對話框。代碼如下：在瀏覽器

7、中預覽網頁，效果如圖在瀏覽器中預覽網頁，效果如圖7.37.3和圖和圖7.47.4所示。所示。事件處理程序的調用在在“確定確定”按鈕的單擊事件中，用多行代碼改變頁面中按鈕的單擊事件中，用多行代碼改變頁面中“JavaScriptJavaScript教程教程”文本的字體樣式。文本的字體樣式。其操作過程是在頁面加載后，文本會以其操作過程是在頁面加載后，文本會以“宋體宋體”格式進行顯示，在單擊格式進行顯示，在單擊“確定確定”按鈕后，將彈按鈕后，將彈出一個輸入提示框，向該提示框的文本框中輸入出一個輸入提示框，向該提示框的文本框中輸入1 1，單擊，單擊“確定確定”按鈕，這時，將關閉提示框，按鈕，這時，將關閉

8、提示框，將頁面中的文本以將頁面中的文本以“華文行楷華文行楷”格式進行顯示，程序代碼如下。格式進行顯示，程序代碼如下。JavaScript教程在瀏覽器中預覽網頁，效果如圖在瀏覽器中預覽網頁，效果如圖7.57.5、圖、圖7.67.6和圖和圖7.77.7所示。所示。事件處理程序的調用（2 2）指定特定對象的特定事件）指定特定對象的特定事件該方法是在該方法是在JavaScriptJavaScript的的 script標記中指定特定的對象，以及該對象要執行的事件名稱，并標記中指定特定的對象，以及該對象要執行的事件名稱，并在在 script和和/script標記中編寫事件處理程序代碼。標記中編寫事件處理程

9、序代碼。/事件處理程序代碼例如，用例如，用 script和和/script標記來完成頁面加載和關閉時顯示對話框。代碼如下：標記來完成頁面加載和關閉時顯示對話框。代碼如下： alert(歡迎進入本頁面); alert(謝謝瀏覽);（3 3）通過）通過JavaScriptJavaScript代碼使用事件代碼使用事件該方法是在該方法是在JavaScriptJavaScript腳本中直接對各對象的事件及事件所調用的函數進行聲明，不用在腳本中直接對各對象的事件及事件所調用的函數進行聲明，不用在HTMLHTML標記中指定要執行的事件。標記中指定要執行的事件。. = ;事件處理程序的調用例例7.2 7.2

10、直接在直接在JavaScriptJavaScript腳本中執行按鈕的單擊事件，而不用在按鈕的腳本中執行按鈕的單擊事件，而不用在按鈕的 input標記中調用單標記中調用單擊事件。該例將擊事件。該例將pp()pp()函數定義為函數定義為ButtonButton按鈕的按鈕的onclickonclick事件的處理過程，程序代碼如下。事件的處理過程，程序代碼如下。通過JavaScript代碼使用事件function pp() alert(歡迎使用JavaScript教程);Button.onclick=pp;在瀏覽器中預覽網頁，效果如圖在瀏覽器中預覽網頁，效果如圖7.87.8所示。所示。JavaScri

11、pt的常用事件為了便于讀者查找為了便于讀者查找JavaScriptJavaScript中的所有事件，下面以表格的形式對各事件進行說明。如表中的所有事件，下面以表格的形式對各事件進行說明。如表10.110.1所示。所示。JavaScript的常用事件續表續表JavaScript的常用事件續表續表JavaScript的常用事件續表續表7.2 鼠標鍵盤事件鼠標鍵盤事件 n 鼠標的單擊事件 n 鼠標的按下或松開事件 n 鼠標的移入移出事件 n 鼠標移動事件 n 鍵盤事件 鼠標和鍵盤事件是在頁面操作中使用最頻繁的操作，可以利用鼠標事件在頁面中實現鼠標鼠標和鍵盤事件是在頁面操作中使用最頻繁的操作，可以利用

12、鼠標事件在頁面中實現鼠標移動、單擊時的特殊效果。也可以利用鍵盤事件來制作頁面的快捷鍵等。移動、單擊時的特殊效果。也可以利用鍵盤事件來制作頁面的快捷鍵等。 鼠標的單擊事件單擊事件（單擊事件（onclickonclick）是在鼠標單擊時被觸發的事件。單擊是指鼠標停留在對象上，按下鼠標鍵，）是在鼠標單擊時被觸發的事件。單擊是指鼠標停留在對象上，按下鼠標鍵，在沒有移動鼠標的同時放開鼠標鍵的這一完整過程。在沒有移動鼠標的同時放開鼠標鍵的這一完整過程。單擊事件一般應用于單擊事件一般應用于ButtonButton對象、對象、CheckboxCheckbox對象、對象、ImageImage對象、對象、Link

13、Link對象、對象、RadioRadio對象、對象、ResetReset對對象和象和SubmitSubmit對象，對象，ButtonButton對象一般只會用到對象一般只會用到onclickonclick事件處理程序，因為該對象不能從用戶那里事件處理程序，因為該對象不能從用戶那里得到任何信息，如果沒有得到任何信息，如果沒有onclickonclick事件處理程序，按鈕對象將不會有任何作用。事件處理程序，按鈕對象將不會有任何作用。例例7.3 7.3 通過按鈕變換背景顏色，單擊通過按鈕變換背景顏色，單擊“變換背景變換背景”按鈕，動態的改變頁面的背景顏色，當用戶按鈕，動態的改變頁面的背景顏色，當用戶

14、再次單擊按鈕時，頁面背景將以不同的顏色進行顯示，效果如圖再次單擊按鈕時，頁面背景將以不同的顏色進行顯示，效果如圖7.97.9、圖、圖7.107.10所示。所示。鼠標的單擊事件程序代碼如下：程序代碼如下：通過按鈕變換背景顏var Arraycolor=new Array(olive,teal,red,blue,maroon,navy,lime,fuschia,green,purple,gray,yellow,aqua,white,silver);var n=0;function turncolors()if (n=(Arraycolor.length-1) n=0;n+;document.bgC

15、olor = Arraycolorn; 用按鈕隨意變換背景顏色.鼠標的按下或松開事件鼠標的按下或松開事件分別是鼠標的按下或松開事件分別是onmousedownonmousedown和和onmouseuponmouseup事件。其中，事件。其中，onmousedownonmousedown事件用于在鼠事件用于在鼠標按下時觸發事件處理程序，標按下時觸發事件處理程序，onmouseuponmouseup事件是在鼠標松開時觸發事件處理程序。在用鼠標單擊事件是在鼠標松開時觸發事件處理程序。在用鼠標單擊對象時，可以用這兩個事件實現其動態效果。對象時，可以用這兩個事件實現其動態效果。例例7.4 7.4 用用

16、onmousedownonmousedown和和onmouseuponmouseup事件將文本制作成類似于事件將文本制作成類似于 a（超鏈接）標記的功能，也就（超鏈接）標記的功能，也就是在文本上按下鼠標時，改變文本的顏色，當在文本上松開鼠標時，恢復文本的默認顏色，并是在文本上按下鼠標時，改變文本的顏色，當在文本上松開鼠標時，恢復文本的默認顏色，并彈出一個空頁（可以鏈接任意網頁）。運行結果如圖彈出一個空頁（可以鏈接任意網頁）。運行結果如圖7.117.11和圖和圖7.127.12所示。所示。鼠標的按下或松開事件程序代碼如下：程序代碼如下：通過按鈕變換背景顏var Arraycolor=new Ar

17、ray(olive,teal,red,blue,maroon,navy,lime,fuschia,green,purple,gray,yellow,aqua,white,silver);var n=0;function turncolors()if (n=(Arraycolor.length-1) n=0;n+;document.bgColor = Arraycolorn; 用按鈕隨意變換背景顏色.鼠標的移入移出事件鼠標的移入和移出事件分別是鼠標的移入和移出事件分別是onmouseoveronmouseover和和onmousemoveonmousemove事件。其中，事件。其中，onmous

18、eoveronmouseover事件在鼠標事件在鼠標移動到對象上方時觸發事件處理程序，移動到對象上方時觸發事件處理程序，onmousemoveonmousemove事件在鼠標移出對象上方時觸發事件處理程事件在鼠標移出對象上方時觸發事件處理程序。可以用這兩個事件在指定的對象上移動鼠標時，實現其對象的動態效果。序。可以用這兩個事件在指定的對象上移動鼠標時，實現其對象的動態效果。例例7.5 7.5 鼠標在圖片上移入或移出時，動態改變圖片的焦點，主要是用鼠標在圖片上移入或移出時，動態改變圖片的焦點，主要是用onmouseoveronmouseover和和onmouseoutonmouseout事件來完

19、成鼠標的移入和移出動作。運行結果如圖事件來完成鼠標的移入和移出動作。運行結果如圖7.137.13、圖、圖7.147.14所示。所示。 鼠標的移入移出事件程序代碼如下：程序代碼如下： 鼠標移動時改變圖片焦點 鼠標移動事件鼠標移動事件（鼠標移動事件（onmousemoveonmousemove）是鼠標在頁面上進行移動時觸發事件處理程序，可以在該事件中）是鼠標在頁面上進行移動時觸發事件處理程序，可以在該事件中用用documentdocument對象實時讀取鼠標在頁面中的位置。對象實時讀取鼠標在頁面中的位置。例例7.6 7.6 鼠標在頁面中移動時，在頁面的狀態欄中顯示當前鼠標在頁面上的位置，也就是（鼠

20、標在頁面中移動時，在頁面的狀態欄中顯示當前鼠標在頁面上的位置，也就是（x,yx,y）值。運行效果如圖值。運行效果如圖7.157.15所示。所示。鼠標移動事件程序代碼如下：程序代碼如下：在狀態欄中顯示鼠標的在頁面中的當前位置鍵盤事件鍵盤事件包含鍵盤事件包含onkeypressonkeypress、onkeydownonkeydown和和onkeyuponkeyup事件，其中事件，其中onkeypressonkeypress事件是在鍵盤上的某個事件是在鍵盤上的某個鍵被按下并且釋放時觸發此事件的處理程序，一般用于鍵盤上的單鍵操作。鍵被按下并且釋放時觸發此事件的處理程序，一般用于鍵盤上的單鍵操作。On

21、keydownOnkeydown事件是在事件是在鍵盤上的某個鍵被按下時觸發此事件的處理程序，一般用于組合鍵的操作。鍵盤上的某個鍵被按下時觸發此事件的處理程序，一般用于組合鍵的操作。OnkeyupOnkeyup事件是在鍵事件是在鍵盤上的某個鍵被按下后松開時觸發此事件的處理程序，一般用于組合鍵的操作。盤上的某個鍵被按下后松開時觸發此事件的處理程序，一般用于組合鍵的操作。為了便于讀者對鍵盤上的按鍵進行操作，下面以表格的形式給出其鍵碼值。為了便于讀者對鍵盤上的按鍵進行操作，下面以表格的形式給出其鍵碼值。下面是鍵盤上字母和數字鍵的鍵碼值，如表下面是鍵盤上字母和數字鍵的鍵碼值，如表7.27.2所示。所示。

22、鍵盤事件下面是數字鍵盤上按鍵的鍵碼值，如表下面是數字鍵盤上按鍵的鍵碼值，如表7.37.3所示。所示。鍵盤事件下面是鍵盤上控制鍵的鍵碼值，如表下面是鍵盤上控制鍵的鍵碼值，如表7.4所示。所示。 鍵盤事件如果想要在如果想要在JavaScriptJavaScript中使用組合鍵，可以利用中使用組合鍵，可以利用event.ctrlKeyevent.ctrlKey，event.shiftKeyevent.shiftKey，event.altKeyevent.altKey判斷是否按下了判斷是否按下了ctrlctrl鍵、鍵、shiftshift鍵以及鍵以及altalt鍵。鍵。例例7.7 7.7 下面的實例是

23、應用鍵盤中的下面的實例是應用鍵盤中的A A鍵，對頁面進行刷新，而無需用鼠標在鍵，對頁面進行刷新，而無需用鼠標在IEIE瀏覽器中單瀏覽器中單擊擊“刷新刷新”按鈕，程序代碼如下。按鈕，程序代碼如下。刷新頁面在瀏覽器中預覽網頁，效果如圖在瀏覽器中預覽網頁，效果如圖7.167.16所示。所示。7.3 頁面事件頁面事件 n 加載與卸載事件 n 頁面大小事件 頁面事件是在頁面加載或改變瀏覽器大小、位置，以及對頁面中的滾動條進行操作時，所頁面事件是在頁面加載或改變瀏覽器大小、位置，以及對頁面中的滾動條進行操作時，所觸發的事件處理程序。本節將通過頁面事件對瀏覽器進行相應的控制。觸發的事件處理程序。本節將通過頁

24、面事件對瀏覽器進行相應的控制。 加載與卸載事件加載事件（加載事件（onloadonload）是在網頁加載完畢后觸發相應的事件處理程序，它可以在網頁加載完成后）是在網頁加載完畢后觸發相應的事件處理程序，它可以在網頁加載完成后對網頁中的表格樣式、字體、背景顏色等進行設置。卸載事件（對網頁中的表格樣式、字體、背景顏色等進行設置。卸載事件（unloadunload）是在卸載網頁時觸發）是在卸載網頁時觸發相應的事件處理程序，卸載網頁是指關閉當前頁或從當前頁跳轉到其他網頁中，該事件常被用相應的事件處理程序，卸載網頁是指關閉當前頁或從當前頁跳轉到其他網頁中，該事件常被用于在關閉當前頁或跳轉其他網頁時，彈出詢

25、問提示框。于在關閉當前頁或跳轉其他網頁時，彈出詢問提示框。在制作網頁時，為了便于網頁資原的利用，可以在網頁加載事件中對網頁中的元素進行設置。在制作網頁時，為了便于網頁資原的利用，可以在網頁加載事件中對網頁中的元素進行設置。下面以示例的形式講解如何在頁面中合理利用圖片資原。下面以示例的形式講解如何在頁面中合理利用圖片資原。例例7.8 7.8 在網頁加載時，將圖片縮小成指定的大小，當鼠標移動到圖片上時，將圖片大小恢復成在網頁加載時，將圖片縮小成指定的大小，當鼠標移動到圖片上時，將圖片大小恢復成原始大小，這樣可以必免使用大小相同的兩個圖片進行切換，并在關閉網頁時，用提示框提示原始大小，這樣可以必免使

26、用大小相同的兩個圖片進行切換，并在關閉網頁時，用提示框提示用戶是否關閉當前頁。結果如圖用戶是否關閉當前頁。結果如圖7.177.17、圖、圖7.187.18所示。所示。加載與卸載事件程序代碼如下：程序代碼如下：網頁加載時縮小圖片=h) img1.height=h-100;img1.width=w-100;function reduce()if (img1.height頁面大小事件頁面的大小事件（頁面的大小事件（onresizeonresize）是用戶改變瀏覽器的大小時觸發事件處理程序，它主要用于固定）是用戶改變瀏覽器的大小時觸發事件處理程序，它主要用于固定瀏覽器的大小。瀏覽器的大小。例例7.9

27、7.9 是在用戶打開網頁時，將瀏覽器以固定的大小顯示在屏幕上，當用鼠標拽動瀏覽器邊框是在用戶打開網頁時，將瀏覽器以固定的大小顯示在屏幕上，當用鼠標拽動瀏覽器邊框改變其大小時，瀏覽器將恢復原始大小。結果如圖改變其大小時，瀏覽器將恢復原始大小。結果如圖7.197.19所示。所示。 程序代碼如下：程序代碼如下：固定瀏覽器的大小function fastness()window.resizeTo(600,450);document.body.onresize=fastness;document.body.onload=fastness;7.4 表單事件表單事件 n 獲得焦點與失去焦點事件 n 失去焦點

28、修改事件 n 表單提交與重置事件 表單事件實際上就是對元素獲得或失去焦點的動作進行控制。可以利用表單事件來改變獲表單事件實際上就是對元素獲得或失去焦點的動作進行控制。可以利用表單事件來改變獲得或失去焦點的元素樣式，這里所指的元素可以是同一類型，也可以是多個不同類型的元得或失去焦點的元素樣式，這里所指的元素可以是同一類型，也可以是多個不同類型的元素。素。 獲得焦點與失去焦點事件獲得焦點事件（獲得焦點事件（onfocusonfocus）是當某個元素獲得焦點時觸發事件處理程序。失去焦點事件（）是當某個元素獲得焦點時觸發事件處理程序。失去焦點事件（onbluronblur）是當前元素失去焦點時觸發事件

29、處理程序。在一般情況下，這兩個事件是同時使用的。是當前元素失去焦點時觸發事件處理程序。在一般情況下，這兩個事件是同時使用的。例例7.10 7.10 用戶選擇頁面中的文本框時，改變文本框的背景顏色，當選擇其他文本框時，將失去焦點用戶選擇頁面中的文本框時，改變文本框的背景顏色，當選擇其他文本框時，將失去焦點的文本框背景顏色恢復原始狀態。結果如圖的文本框背景顏色恢復原始狀態。結果如圖7.207.20所示。所示。程序代碼如下：程序代碼如下：文本框獲得焦點時改變背景顏色 用戶名: 密碼: 獲得焦點與失去焦點事件 真實姓名: 性別: 郵箱: 獲得焦點與失去焦點事件失去焦點修改事件失去焦點修改事件（失去焦點

30、修改事件（onchangeonchange）是當前元素失去焦點并且元素的內容發生改變時觸發事件處理程序。）是當前元素失去焦點并且元素的內容發生改變時觸發事件處理程序。該事件一般在下拉文本框中使用。該事件一般在下拉文本框中使用。例例7.11 7.11 是在用戶選擇下拉文本框中的顏色時，通過是在用戶選擇下拉文本框中的顏色時，通過onchangeonchange事件來相應的改變文本框的字體顏色。事件來相應的改變文本框的字體顏色。結果如圖結果如圖7.217.21所示。所示。 程序代碼如下：程序代碼如下：用下拉文本框改變字體顏色 黑 黃 藍 綠 紅 紫 失去焦點修改事件表單提交與重置事件表單提交事件（表

31、單提交事件（onsubmitonsubmit）是在用戶提交表單時（通常使用）是在用戶提交表單時（通常使用“提交提交”按鈕，也就是將按鈕的按鈕，也就是將按鈕的typetype屬性設為屬性設為submitsubmit）, ,在表單提交之前被觸發，因此，該事件的處理程序通過返回在表單提交之前被觸發，因此，該事件的處理程序通過返回falsefalse值來阻止表單的提交。該事件值來阻止表單的提交。該事件可以用來驗證表單輸入項的正確性。可以用來驗證表單輸入項的正確性。表單重置事件（表單重置事件（onresetonreset）與表單提交事件的處理過程相同，該事件只是將表單中的各元素的值設置為原始）與表單提交

32、事件的處理過程相同，該事件只是將表單中的各元素的值設置為原始值。一般用于清空表單中的文本框。值。一般用于清空表單中的文本框。下面給出這兩個事件的使用格式：下面給出這兩個事件的使用格式：formnameformname：表單名稱。：表單名稱。FunnameFunname：函數名或執行語句，如果是函數名，在該函數中必須有布爾型的返回值。：函數名或執行語句，如果是函數名，在該函數中必須有布爾型的返回值。例例7.12 7.12 提交表單時，通過提交表單時，通過onsubmitonsubmit事件判斷表單中是否有空文本框，如果有，則不允許提交，并通過表事件判斷表單中是否有空文本框，如果有，則不允許提交，

33、并通過表單的單的onresetonreset事件將表單中的文本框清空，以便重新輸入信息。結果如圖事件將表單中的文本框清空，以便重新輸入信息。結果如圖7.227.22所示。所示。表單提交與重置事件程序代碼如下：程序代碼如下：表單提交的驗證 所屬類別: 數碼設備 家用電器 禮品工藝 數碼相機 打印機 表單提交與重置事件 商品名稱: 會員價: 提供廠商: 商品簡介: 商品數量:   表單提交與重置事件!-function AllReset() if (window.confirm(是否進行重置？)return true;elsereturn false;function AllSu

34、bmit() var T=true;var e=window.event;var obj=e.srcElement;for (var i=1;i7.5 滾動字幕事件滾動字幕事件 n onbounce事件 n onstart事件 字幕滾動事件主要是在字幕滾動事件主要是在標記中使用，該標記雖然不能實現多樣化的字幕滾標記中使用，該標記雖然不能實現多樣化的字幕滾動效果，但應用起來十分簡單，可以使用最少的語句來實現字幕滾動的效果。動效果，但應用起來十分簡單，可以使用最少的語句來實現字幕滾動的效果。 onbounce事件onbounceonbounce事件是在事件是在 marquee標記中的內容滾動到上下

35、或左右邊界時觸發的事件處理程序，該事件標記中的內容滾動到上下或左右邊界時觸發的事件處理程序，該事件只有在只有在 marquee標記的標記的behaviorbehavior屬性設為屬性設為aloernatealoernate時才有效。時才有效。例例7.13 7.13 將將 marquee標記的標記的behaviorbehavior屬性設為屬性設為aloernatealoernate，directiondirection屬性設置為屬性設置為upup，使字幕可以，使字幕可以在頁面中上下循環滾動，并通過在頁面中上下循環滾動，并通過onbounceonbounce事件在字幕到達窗口邊界時，修改事件在字幕

36、到達窗口邊界時，修改scrollAmountscrollAmount屬性值，屬性值，改變字幕的滾動速度。結果如圖改變字幕的滾動速度。結果如圖7.237.23所示。所示。onbounce事件程序代碼如下：程序代碼如下：字幕滾動到窗口邊界時速度逐漸加快（減慢）第一行滾動字幕第二行滾動字幕第三行滾動字幕onstart事件onstartonstart事件是在事件是在 marquee標記中的文本開始顯示時觸發事件處理程序。可以通過該事件在滾動內標記中的文本開始顯示時觸發事件處理程序。可以通過該事件在滾動內容顯示時，設置其顏色、樣式、滾動方向等。容顯示時，設置其顏色、樣式、滾動方向等。例例7.14 7.1

37、4 通過通過 marquee標記的標記的onstartonstart事件，在滾動字幕顯示時，動態設置滾動字幕的字體顏色和事件，在滾動字幕顯示時，動態設置滾動字幕的字體顏色和滾動方向。結果如圖滾動方向。結果如圖7.247.24所示。所示。onstart事件程序代碼如下：程序代碼如下：動態設置滾動字幕的顏色和滾動方向第一行滾動字幕第二行滾動字幕第三行滾動字幕(arrayObj.length-1)i=0;obj.style.color=arrayObji;i=i+1;/-7.6 編輯事件編輯事件 n 文本編輯事件 n 對象拖動事件 編輯事件是在瀏覽器中的內容被修改或移動時所執行的相關事件。它主要是對

38、瀏覽器編輯事件是在瀏覽器中的內容被修改或移動時所執行的相關事件。它主要是對瀏覽器中被選擇的內容進行復制、剪切、粘貼時的觸發事件，以及在用鼠標拽動對象時所觸發的中被選擇的內容進行復制、剪切、粘貼時的觸發事件，以及在用鼠標拽動對象時所觸發的一系列事件的集合。一系列事件的集合。 文本編輯事件1復制事件復制事件復制事件是在瀏覽器中復制被選中的部份或全部內容時觸發事件處理程序，復制事件有復制事件是在瀏覽器中復制被選中的部份或全部內容時觸發事件處理程序，復制事件有onbeforecopyonbeforecopy和和oncopyoncopy兩個事件，兩個事件，onbeforecopyonbeforecopy

39、事件是將網頁內容復制到剪貼版時觸發事件處里程事件是將網頁內容復制到剪貼版時觸發事件處里程序，序，oncopyoncopy事件是在網頁中復制內容時觸發事件處里程序。事件是在網頁中復制內容時觸發事件處里程序。例例7.15 7.15 不允許復制網頁中的內容，代碼如下。不允許復制網頁中的內容，代碼如下。function pp()alert(該頁面不允許復制);return false;其實，要是想屏蔽網頁中的復制功能，可以直接在其實，要是想屏蔽網頁中的復制功能，可以直接在標記的標記的onbeforecopy或或oncopy事件中用事件中用JavaScript語句來實現。代碼如下：語句來實現。代碼如下：

40、文本編輯事件2剪切事件剪切事件剪切事件是在瀏覽器中剪切被選中的內容時觸發事件處理程序，剪切事件有剪切事件是在瀏覽器中剪切被選中的內容時觸發事件處理程序，剪切事件有onbeforecut和和oncut兩個事件，兩個事件，onbeforecut事件是當頁面中的一部分或全部內容被剪切到瀏覽者系統剪貼板時觸發事事件是當頁面中的一部分或全部內容被剪切到瀏覽者系統剪貼板時觸發事件處理程序，件處理程序，oncut事件是當頁面中被選擇的內容被剪切時觸發事件處理程序。事件是當頁面中被選擇的內容被剪切時觸發事件處理程序。例例7.16 屏蔽在文本框中進行剪切的操作，代碼如下。屏蔽在文本框中進行剪切的操作，代碼如下。

41、用JavaScript實現頁面不能進行復制操作 <body oncopy=return pp()></body><script language=javascript>function pp()alert(該頁面不允許復制);return false;</script>在瀏覽器中預覽網頁，效果如圖在瀏覽器中預覽網頁，效果如圖7.25所示。所示。文本編輯事件3粘貼事件粘貼事件粘貼事件（粘貼事件（onbeforepaste）是將內容要從瀏覽者的系統剪貼板中粘貼到頁面上時所觸發的事件處）是

42、將內容要從瀏覽者的系統剪貼板中粘貼到頁面上時所觸發的事件處理程序。可以利用該事件避免瀏覽者在添寫信息時，對驗證信息進行粘貼，如密碼文本框和確定密理程序。可以利用該事件避免瀏覽者在添寫信息時，對驗證信息進行粘貼，如密碼文本框和確定密碼文本框中的信息。碼文本框中的信息。例例7.17 向文本框粘貼文本時，利用向文本框粘貼文本時，利用onbeforepaste事件來清空剪貼板，使其無法向文本框中粘貼事件來清空剪貼板，使其無法向文本框中粘貼數據，代碼如下。數據，代碼如下。 function clearup() window.clipboardData.setData(text,);/清空剪貼板粘貼事件（

43、粘貼事件（onpaste）是當內容被粘貼時觸發事件處理程序。在該事件中可以用）是當內容被粘貼時觸發事件處理程序。在該事件中可以用return語句來屏蔽粘語句來屏蔽粘貼操作。例如，用貼操作。例如，用onpaste事件屏蔽文本框的粘貼操作。代碼如下：事件屏蔽文本框的粘貼操作。代碼如下： 文本編輯事件4選擇事件選擇事件選擇事件是用戶在選擇事件是用戶在body、input或或textarea表單區域中選擇文本時觸發事件處理程序。選擇事件有表單區域中選擇文本時觸發事件處理程序。選擇事件有onselect和和onselectstart兩個事件。兩個事件。onselect事件是當文本內容被選擇時觸發事件處理

44、程序。當使用本事件時，只能在相應的文本中選事件是當文本內容被選擇時觸發事件處理程序。當使用本事件時，只能在相應的文本中選擇一個字符或一個漢字后觸發本事件，并不是用鼠標選擇文本后，松開鼠標時觸發。擇一個字符或一個漢字后觸發本事件，并不是用鼠標選擇文本后，松開鼠標時觸發。例例7.18 通過通過onselect事件來判斷，在頁面中所選擇的文本是否為事件來判斷，在頁面中所選擇的文本是否為“hello!”，如果是則用提示框進，如果是則用提示框進行顯示。結果如圖行顯示。結果如圖7.26所示。所示。文本編輯事件程序代碼如下：程序代碼如下：顯示選擇的文本 function Tselect()var txt=d

45、ocument.selection.createRange().text;if (txt=hello!)alert(你當前所選擇的內容為：+txt);onselectstart事件是開始對文本的內容進行選擇時觸發事件處理程序。在該事件中可以用事件是開始對文本的內容進行選擇時觸發事件處理程序。在該事件中可以用return語語句來屏蔽文本的選擇操作。句來屏蔽文本的選擇操作。例如，在頁面中實現不能選擇文本內容的操作，代碼如下。例如，在頁面中實現不能選擇文本內容的操作，代碼如下。對象拖動事件在在JavaScript中有兩種方法可以實現拖放功能，即系統拖放和模擬拖放。微軟公司為中有兩種方法可以實現拖放功

46、能，即系統拖放和模擬拖放。微軟公司為IE瀏覽器提供瀏覽器提供的拖放事件有兩類，一類是拖放項事件，一類是放置目標事件。下面對這兩類所包含的事件進行說的拖放事件有兩類，一類是拖放項事件，一類是放置目標事件。下面對這兩類所包含的事件進行說明。明。1拖放對象事件拖放對象事件拖放對象事件包含拖放對象事件包含ondrag、ondragend和和ondragstart事件。事件。ondrag事件是當某個對象被拖動時觸發事件處理程序。事件是當某個對象被拖動時觸發事件處理程序。ondragend事件是當鼠標拖動結束時觸發事件是當鼠標拖動結束時觸發事件處理程序，即當鼠標的按鈕被釋放時觸發該事件。事件處理程序，即當

47、鼠標的按鈕被釋放時觸發該事件。ondragstart事件是當某對象將被拖動時觸事件是當某對象將被拖動時觸發事件處理程序，即當鼠標按下，開始移動鼠標時觸發該事件。發事件處理程序，即當鼠標按下，開始移動鼠標時觸發該事件。例例7.19 在圖片被拖動時，在窗口的標題欄中顯示圖片拖動的狀態。即在將要拖動圖片時，在標題在圖片被拖動時，在窗口的標題欄中顯示圖片拖動的狀態。即在將要拖動圖片時，在標題欄中顯示欄中顯示dragstart；在圖片拖動時，在標題欄中顯示；在圖片拖動時，在標題欄中顯示drag；在拖動結束時，在標題欄中顯示；在拖動結束時，在標題欄中顯示dragend。代碼如下：。代碼如下： function drag(Event) document.title=Event.type;/在窗口的題欄中寫入相就的事件類型名對象拖動事件2放置目標事件放置目標事件放置目標事件包含放置目標事件包含ondragover、ondrag