《網頁設計與制作（HTML+CSS+JavaScript）》課件-CORE-11_第1頁
《網頁設計與制作（HTML+CSS+JavaScript）》課件-CORE-11_第2頁
《網頁設計與制作（HTML+CSS+JavaScript）》課件-CORE-11_第3頁
《網頁設計與制作（HTML+CSS+JavaScript）》課件-CORE-11_第4頁
《網頁設計與制作（HTML+CSS+JavaScript）》課件-CORE-11_第5頁
已閱讀5頁，還剩13頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第十一章事件處理目標理解事件的概念。能夠指定、編寫事件的處理程序。掌握窗口事件、鼠標事件、表單事件的相關應用。概述、專業術語事件是用戶所做的，或系統自動生成的動作。通過創建響應這種動作的處理程序，可以使得網頁更具交互性。當今流行的應用程序，不論是Windows應用程序還是Web應用程序，都是基于事件驅動的原理。指定事件處理程序JavaScript腳本處理事件主要通過顯式聲明的方式實現，即我們所說的定義的方式，此外還可以通過匿名函數、手動觸發等方式來指定事件的處理程序。下面我們將詳細講解顯式聲明方式，請看下面的示例。<html><head><title>顯式聲明</title> <scriptlanguage="javascript">functionshowWindows(){for(vari=0;i<5;i++){window.open("virus.html","","");}}</script></head><body><form><inputtype="button"onClick="showWindows()"value="單擊打開窗口"></form></body></html>指定事件處理程序在瀏覽器中打開這個網頁，其效果如右圖11-1所示：單擊按鈕，觸發onClick事件，出現我們熟悉的病毒效果，然而真正的病毒是要讓IE不斷的彈出新窗口，也就是讓我們的“showWindows”函數的循環條件永遠為真，但這里我們限于教材的需要只讓它彈出5個新窗口，如右圖11-2所示：事件詳情

窗口事件窗口事件是當用戶操作瀏覽器窗口時觸發的事件。最常用的窗口事件有onLoad事件（載入事件）、onUnload（關閉事件）、onFocus事件（焦點事件）、onBlur事件（失去焦點事件）、onResize（調整窗口大小事件）等事件詳情當用戶進入頁面且頁面元素都加載完成后就觸發了onLoad事件。頁面的顯示效果如右圖11-3所示：單擊“確定”后，再點擊第二個文本框，此時第二個文本框獲得了焦點觸發onFocus事件，效果如右圖11-4所示：事件詳情單擊“確定”后，再點擊頁面上除了第二個文本框以外的任意部分使得第二個文本框失去焦點，此時就觸發了第二個文本框的失去焦點事件即onBlur事件。效果如右圖11-5所示：單擊“確定”后，接下來我們關閉此窗口事件的頁面，這時就會觸發窗口事件頁面的onUnload事件，顯示效果如右圖11-6所示：事件詳情鼠標事件主要的鼠標事件包括：onClick事件onDblClick事件onMouseOver事件onMouseOut事件onMouseDown事件onMouseUp事件onMouseMove事件事件詳情下面兩個例子讓大家認識一下鼠標事件。<html><head><title>顯示鼠標坐標</title></head><bodyonMouseMove="microsoftMouseMove()"><center><tableborder="1"><tr><tdalign=center><fontcolor="#FF0000"size="6">下面為腳本顯示區</font></td></tr><tr><tdalign=centerheight=80><scriptlanguage="javascript">functionmicrosoftMouseMove(){document.test.x.value=window.event.x;document.test.y.value=window.event.y;}</script><formname="test">X:<inputname="x"type="text"size="4">Y:<inputtype="text"name="y"size="4"></form></td></tr></table></center></body></html>事件詳情在瀏覽器中打開這個網頁，效果如下圖11-7所示：在代碼中使用了鼠標的onMouseMove事件，以便在頁面的對應文本框中顯示鼠標的坐標，在網頁中以瀏覽器的可視區域的左上角為坐標原點。其中“window.event.x”用來獲取鼠標的x軸坐標，“window.event.y”用來獲取y軸坐標。通過鼠標事件我們也可以實現圖片的切換、文字的變化等等網頁特效。下面我們將通過圖片的連環效果，運用鼠標的相關事件。展示我們熟悉的“跑步”動作。同時，通過不同的鼠標事件，實現加速、減速和停止等操作。事件詳情在瀏覽器中打開該網頁，效果如下圖11-8事件詳情表單事件onSubmit事件onReset事件onChange事件onSelect事件事件詳情代碼示例見課本11-5效果如下事件詳情鍵盤事件onKeyDown事件

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論