Client-SideJavaScript-静宜大学资讯学院课件_第1页
Client-SideJavaScript-静宜大学资讯学院课件_第2页
Client-SideJavaScript-静宜大学资讯学院课件_第3页
Client-SideJavaScript-静宜大学资讯学院课件_第4页
Client-SideJavaScript-静宜大学资讯学院课件_第5页
已阅读5页,还剩69页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

Events&EventHandling靜宜大學資管系蔡奇偉副教授Events&EventHandling靜宜大學資管系1內容大綱事件驅動模式的程式事件的分類四種事件模型事件的差異瀏覽器均有的事件瀏覽器獨有的事件事件的分類與說明指定事件處理碼的方法事件處理碼的傳回值事件物件事件的傳遞方式內容大綱事件驅動模式的程式2事件驅動模式的程式所有與瀏覽者互動的JavaScript程式都採用事件驅動(eventdriven)的架構。在這個架構下,瀏覽器會產生一些事件(event)來反映某些有趣的狀況發生在網頁或網頁元件中;譬如以下的狀況都會觸發瀏覽器產生相關的事件:網頁完全下載後、瀏覽者的滑鼠遊標滑過超連結、瀏覽者按下表單中的傳送按鈕、…、等等。若對處理某事件有興趣,你就必須在適當的元件中設定此事件的處理碼(eventhandler)。當這事件發生時,瀏覽器就會自動執行你所提供的事件處理碼。事件驅動模式的程式所有與瀏覽者互動的JavaScript3事件的分類使用者操作引發的事件,如:按下滑鼠鍵、改變文字欄裏的內容、移動滑鼠游標通過超連結、…、等等瀏覽器狀態改變所引發的事件,如:載入新網頁和離開網頁計時器(Timer)引發的事件錯誤(Error)引發的事件我們可以把事件分為下列四類:事件的分類使用者操作引發的事件,如:按下滑鼠鍵、改變文字欄4四種事件模型原始的事件模型源自於Netscape4規格的一個簡單事件模型又稱為DOMLevel0的事件模型所有具有JavaScript功能的瀏覽器都支援此事件模型標準的事件模型DOMLevel2所定義的事件模型Netscape6和Mozilla瀏覽器支援IE的事件模型IE4以後的IE瀏覽器所採用事件模型Netscape4事件模型Netscape4的事件模型Netscape6仍支援其中部分的功能由於瀏覽器事件模型的差異性,使用某個瀏覽器(如IE)獨有的事件進階功能常會造成其它瀏覽器(如Netsacpe)的錯誤。四種事件模型原始的事件模型由於瀏覽器事件模型的差異性,使用某5事件的差異Netscape4、IE和DOMLevel2各有若干特殊的事件,我們必須注意這些不相容性。Netscape4的事件通常只能用在特定的HTML元件。IE和DOMLevel2大部份的事件都適用於所有的HTML元件。三者的事件傳遞方式不同事件的差異Netscape4、IE和DOMLeve6瀏覽器均有的事件AbortBlurChangeClickDblClickErrorFocusKeyDownKeyPressKeyUpLoadMouseDownMouseMoveMouseOutMouseOverMouseUpMoveResetResizeSelectSubmitUnload瀏覽器均有的事件AbortKeyUpResize7瀏覽器獨有的事件DragDropBeforeCopyBeforeCutBeforePasteBeforePrintBeforeUnloadBounceContextMenuCopyCutDragDragEndNetscapeIEDragEnterDragLeaveDragOverDragStartDropFilterChangeFinishFocusInFocusOutHelpMouseEnterMouseLeaveMouseLeaveMouseWheelMoveEndMoveStartPasteScrollSelectStartStart瀏覽器獨有的事件DragDropBeforeCopyNets8事件的分類與說明滑鼠事件鍵盤事件表單事件文件事件視窗事件其它事件事件的分類與說明滑鼠事件9滑鼠事件Click發生時機:使用者在網頁元件上點一下滑鼠左鍵。適用元件:N2,IE3:a,area,inputN4:

button,radio,checkbox,submit,reset,linkHTML4,N6,IE4:大部分元件註:若處理碼傳回false,則取消元件的預設行為(如

followlink,reset,submit等)滑鼠事件Click發生時機:使用者在網頁元件上點一下滑鼠左鍵10DblClick發生時機:使用者在網頁元件上快速點兩次滑鼠左鍵。適用元件:N4:

document,linkHTML4,N6,IE4:大部分元件MouseDown發生時機:使用者在網頁元件上按住滑鼠左鍵。適用元件:N4:

button,document,link,a,area,imgHTML4,N6,IE4:大部分元件DblClick發生時機:使用者在網頁元件上快速點兩次滑鼠左11MouseMove發生時機:使用者在網頁上移動滑鼠游標。適用元件:HTML4,N6,IE4:大部分元件MouseOut發生時機:使用者把滑鼠游標移出網頁元件。適用元件:HTML4,N6,IE4:大部分元件N4:

layer,linkMouseMove發生時機:使用者在網頁上移動滑鼠游標。Mo12MouseOver發生時機:使用者把滑鼠游標移到網頁元件的上方。適用元件:HTML4,N6,IE4:大部分元件註:在超連結元件中,處理碼傳回true可制止超連結

的URL出現在狀態行中。MouseUp發生時機:使用者放開滑鼠的左鍵。適用元件:HTML4,N6,IE4:大部分元件Netscape:a,area,img,button,document,linkMouseOver發生時機:使用者把滑鼠游標移到網頁元件的上13<ahref=".tw"onmousedown='document.img1.src="down.jpg"'onmouseout='document.img1.src="normal.jpg"'onmouseover='document.img1.src="over.jpg"'><imgname="img1"src="normal.jpg"border=0></a>範例底下的滑鼠事件設定可製造出按鈕下壓的效果。不過只適用於IE,而不適用於Netscape4。<ahref=".tw"14鍵盤事件KeyDown發生時機:使用者按住鍵盤上的某一個鍵。適用元件:HTML4,N6,IE4:表單元件和body元件N4:

input,textarea註:處理碼可傳回false來取消輸入的字元。鍵盤事件KeyDown發生時機:使用者按住鍵盤上的某一個鍵。15KeyPress發生時機:使用者按下然後放開鍵盤上的某一個鍵。適用元件:HTML4,N6,IE4:表單元件和body元件N4:

input,textarea註:處理碼可傳回false來取消輸入的字元。KeyUp發生時機:使用者放開鍵盤上的某一個鍵。適用元件:HTML4,N6,IE4:表單元件和body元件N4:

input,textareaKeyPress發生時機:使用者按下然後放開鍵盤上的某一個鍵16表單事件Blur發生時機:使用者把輸入游標移出網頁元件。適用元件:HTML4,N2,IE3:button,input,label,select,textareaN3,IE4:

bodyFocus發生時機:使用者把輸入游標移入網頁元件。適用元件:HTML4,N2,IE3:button,input,label,select,textareaN3,IE4:

body表單事件Blur發生時機:使用者把輸入游標移出網頁元件。Fo17Change發生時機:表單元件的內容改變了。適用元件:HTML4,N2,IE3:input,select,textareaReset發生時機:使用者按下表單的reset按鈕。適用元件:form註:處理碼可傳回false來取消表單的重置。Change發生時機:表單元件的內容改變了。Reset發生時18Select發生時機:使用者拉選input或textArea內的文字。適用元件:input,textAreaSubmit發生時機:使用者按下表單的submit按鈕。適用元件:form註:處理碼可傳回false來取消表單的傳送。Select發生時機:使用者拉選input或textA19文件事件Load發生時機:文件載入瀏覽器視窗之後。適用元件:HTML4,N2,IE3:body,framesetN3,IE4:imgN6,IE4:iframe,objectUnload發生時機:離開網頁時。適用元件:HTML4,N2,IE3:body,frameset文件事件Load發生時機:文件載入瀏覽器視窗之後。Unloa20視窗事件Move發生時機:使用者移動瀏覽器視窗。適用元件:N4,IE4:body,framesetResize發生時機:使用者變更瀏覽器視窗的大小。適用元件:N4,IE4:body,frameset視窗事件Move發生時機:使用者移動瀏覽器視窗。Resize21其它事件Abort發生時機:當瀏覽者藉由選取另一個超連結、按下「停止」 按鈕、或其他的方式來放棄圖片的載入時。適用元件:N3,IE4:imgError發生時機:載入圖片時發生錯誤。適用元件:N3,IE4:img其它事件Abort發生時機:當瀏覽者藉由選取另一個超連結、按22指定事件處理碼的方法事件名稱和事件處理碼名稱在HTML標籤中指定事件處理碼在JavaScript程式中指定事件處理碼IE獨有的指定事件處理碼方式指定事件處理碼的方法事件名稱和事件處理碼名稱23事件名稱和事件處理碼名稱只要在事件名稱之前加上on就是事件處理碼的名稱。譬如:事件Abort的處理碼是onAbort、事件MouseDown的處理碼是onMouseDown、…、等等。不過,由於HTML並不區別屬性名稱的大小寫,再加上JavaScript和XHTML都用小寫的事件處理碼名稱,所以目前的趨勢是用小寫的事件處理碼名稱。所以前述的大小寫混合的處理碼名稱可分別改寫成onabort和onmousedown。事件名稱和事件處理碼名稱只要在事件名稱之前加上on就是事24在HTML標籤中指定事件處理碼若要處理某特定事件,你可以在處理該事件的元件標籤中,設定代表該事件的處理碼屬性;此屬性的值是一段處理該事件的JavaScript程式。指定的方式如下:<tag

eventHandler="JavaScriptCode">譬如:<IMGSRC=image.gifonabort="alert('Areyoureallytoobusytowait?')">指定事件處理碼:當瀏覽者藉由選取另一個超連結、按下「停止」按鈕、或其他的方式來放棄圖片的載入時。在HTML標籤中指定事件處理碼若要處理某特定事件,你可以25範例<bodyoncontextmenu="returnfalse"onselectstart="returnfalse"oncopy="returnfalse">有些網路小說網站用底下的事件處理碼設定技巧來防止瀏覽者拷貝網頁的文字:取消瀏覽器滑鼠右鍵的功能取消瀏覽器選取網頁內容的功能取消瀏覽器拷貝網頁內容的功能不過這個技巧僅適用於IE瀏覽器,對其他瀏覽器無效。範例<bodyoncontextmenu="return26在JavaScript程式中指定事件處理碼每個HTML元件的事件屬性都有對應的JavaScript屬性。因此,我們可以用JavaScript來指定元件的事件處理碼。譬如:<formname=myform><inputname=b1type=buttonvalue=“按我吧!”></form><script>document.myform.b1.onclick=function(){alert(“謝謝”);};</script>事件屬性事件屬性的值必須是一個函式在JavaScript程式中指定事件處理碼每個HTML27範例<script>functionconfirmLink(){returnconfirm(“確定要連到“+this.href+“?”);}functionconfirmAllLinks(){for(vark=0;k<document.links.length;k++)Document.links[k].onclick=confirmLink;}</script>…<bodyonload=“confirmAllLinks();”>下面的程式使得按網頁中任一的超連結,都會先出現一個詢問是否要連結的對話視窗。範例<script>下面的程式使得按網頁中任一的超連結,都會28IE獨有的指定事件處理碼方式IE4以上的IE瀏覽器提供以下範例所示的事件處理碼指定方式:<scriptfor=warning>alert(“Don’tpushme!”);</script>…<inputtype=buttonid=warningvalue=“Clickme”>兩者的屬性值相同IE獨有的指定事件處理碼方式IE4以上的IE瀏覽器29事件處理碼的傳回值一般而言,若事件處理碼的傳回值是false的話,會制止瀏覽器處理該事件的預設行為。比方說,按下表單的傳送按鈕,瀏覽器會開始傳送表單內容回伺服器。下面的例子示範如何取消傳送表單:<script>validate_form(){//checkformdataif(bad_data)returnfalse;}…<formonsubmit=“returnvalidate_form();”>事件處理碼的傳回值一般而言,若事件處理碼的傳回值是fals30上面規則的一個例外情形是:當滑鼠移到超連結上時,瀏覽器會在狀態欄上顯示超連結的URL資訊。若要取消顯示這個資訊,我們必須把mouseover處理碼的傳回值設成true,如底下的範例所示:<ahref=“help.html”onmouseover=“returntrue;”>Help</a>若事件處理碼不傳回一個值的話,瀏覽器則按照預設的方式處理該事件。上面規則的一個例外情形是:當滑鼠移到超連結上時,瀏覽器會在狀31事件物件什麼是事件物件?IE的事件物件Netscape4的事件物件事件物件什麼是事件物件?32什麼是事件物件?每當一個事件發生時,瀏覽器會建立一個事件物件(eventobject),用來提供更詳盡的事件資訊,諸如:滑鼠的位置、按下那一個滑鼠按鈕、鍵盤按鍵值、…、等等。因此,我們可以運用事件物件裏的記錄來更精細地處理事件。然而,Netscape4、IE、和DOM2提供事件物件的方式和內容並不相同,這使得撰寫適用於三者的事件處理程式變得複雜許多。什麼是事件物件?每當一個事件發生時,瀏覽器會建立一個事件物件33IE的事件物件IE的事件物件是window.event這個變數。底下列出它的屬性:屬性名稱型態儲存項目type字串事件的名稱,如click,mouseover,…,等等。srcElement物件事件發生所在的元件button整數1:按下滑鼠的左按鈕2:按下滑鼠的右按鈕4:按下滑鼠的中按鈕IE的事件物件IE的事件物件是window.event34屬性名稱型態儲存項目clientXclientY整數事件發生時滑鼠的相對於視窗左上角的座標位置。offsetXoffsetY整數事件發生時的滑鼠相對於發生元件左上角的座標位置。alkKeyctrlKeyshiftKeyboolean事件發生時,是否按下Alt、Ctrl、或Shift鍵。true:按下false:未按下keyCode整數keydown或keyup事件傳回的按鍵Unicode字碼。你可以用函式String.fromCharCode()將這字碼轉成字串。屬性名稱型態儲存項目clientX整數事件發生時滑鼠的相對於35屬性名稱型態儲存項目fromElement物件進入事件發生元件之前,產生mouseover事件的元件toElement物件mouseout事件發生元件所進入的元件。cancelBubbleboolean取消事件向上傳遞(bubbling)的機制。returnValueboolean若設成false,可以制止瀏覽器執行事件的預設行為,換句話說,這和之前所述的事件處理碼傳回false具有相同的作用。fromElementeventElementtoElementmouseovermouseout屬性名稱型態儲存項目fromElement物件進入事件發生元36<scriptlanguage=javascript>document.onkeydown=nextpagefunctionnextpage(){if(event.keyCode==13)//CRlocation="showbook.asp?bl_id=2145"if(event.keyCode==39)//‘(單引號)location="readchapter.asp?Bu_id=45468&bl_id=2145"}</script>範例底下程式讓Enter鍵連結到書本的目錄網頁、單引號鍵連結到下一章。<scriptlanguage=javascript>範例37Events&EventHandling靜宜大學資管系蔡奇偉副教授Events&EventHandling靜宜大學資管系38內容大綱事件驅動模式的程式事件的分類四種事件模型事件的差異瀏覽器均有的事件瀏覽器獨有的事件事件的分類與說明指定事件處理碼的方法事件處理碼的傳回值事件物件事件的傳遞方式內容大綱事件驅動模式的程式39事件驅動模式的程式所有與瀏覽者互動的JavaScript程式都採用事件驅動(eventdriven)的架構。在這個架構下,瀏覽器會產生一些事件(event)來反映某些有趣的狀況發生在網頁或網頁元件中;譬如以下的狀況都會觸發瀏覽器產生相關的事件:網頁完全下載後、瀏覽者的滑鼠遊標滑過超連結、瀏覽者按下表單中的傳送按鈕、…、等等。若對處理某事件有興趣,你就必須在適當的元件中設定此事件的處理碼(eventhandler)。當這事件發生時,瀏覽器就會自動執行你所提供的事件處理碼。事件驅動模式的程式所有與瀏覽者互動的JavaScript40事件的分類使用者操作引發的事件,如:按下滑鼠鍵、改變文字欄裏的內容、移動滑鼠游標通過超連結、…、等等瀏覽器狀態改變所引發的事件,如:載入新網頁和離開網頁計時器(Timer)引發的事件錯誤(Error)引發的事件我們可以把事件分為下列四類:事件的分類使用者操作引發的事件,如:按下滑鼠鍵、改變文字欄41四種事件模型原始的事件模型源自於Netscape4規格的一個簡單事件模型又稱為DOMLevel0的事件模型所有具有JavaScript功能的瀏覽器都支援此事件模型標準的事件模型DOMLevel2所定義的事件模型Netscape6和Mozilla瀏覽器支援IE的事件模型IE4以後的IE瀏覽器所採用事件模型Netscape4事件模型Netscape4的事件模型Netscape6仍支援其中部分的功能由於瀏覽器事件模型的差異性,使用某個瀏覽器(如IE)獨有的事件進階功能常會造成其它瀏覽器(如Netsacpe)的錯誤。四種事件模型原始的事件模型由於瀏覽器事件模型的差異性,使用某42事件的差異Netscape4、IE和DOMLevel2各有若干特殊的事件,我們必須注意這些不相容性。Netscape4的事件通常只能用在特定的HTML元件。IE和DOMLevel2大部份的事件都適用於所有的HTML元件。三者的事件傳遞方式不同事件的差異Netscape4、IE和DOMLeve43瀏覽器均有的事件AbortBlurChangeClickDblClickErrorFocusKeyDownKeyPressKeyUpLoadMouseDownMouseMoveMouseOutMouseOverMouseUpMoveResetResizeSelectSubmitUnload瀏覽器均有的事件AbortKeyUpResize44瀏覽器獨有的事件DragDropBeforeCopyBeforeCutBeforePasteBeforePrintBeforeUnloadBounceContextMenuCopyCutDragDragEndNetscapeIEDragEnterDragLeaveDragOverDragStartDropFilterChangeFinishFocusInFocusOutHelpMouseEnterMouseLeaveMouseLeaveMouseWheelMoveEndMoveStartPasteScrollSelectStartStart瀏覽器獨有的事件DragDropBeforeCopyNets45事件的分類與說明滑鼠事件鍵盤事件表單事件文件事件視窗事件其它事件事件的分類與說明滑鼠事件46滑鼠事件Click發生時機:使用者在網頁元件上點一下滑鼠左鍵。適用元件:N2,IE3:a,area,inputN4:

button,radio,checkbox,submit,reset,linkHTML4,N6,IE4:大部分元件註:若處理碼傳回false,則取消元件的預設行為(如

followlink,reset,submit等)滑鼠事件Click發生時機:使用者在網頁元件上點一下滑鼠左鍵47DblClick發生時機:使用者在網頁元件上快速點兩次滑鼠左鍵。適用元件:N4:

document,linkHTML4,N6,IE4:大部分元件MouseDown發生時機:使用者在網頁元件上按住滑鼠左鍵。適用元件:N4:

button,document,link,a,area,imgHTML4,N6,IE4:大部分元件DblClick發生時機:使用者在網頁元件上快速點兩次滑鼠左48MouseMove發生時機:使用者在網頁上移動滑鼠游標。適用元件:HTML4,N6,IE4:大部分元件MouseOut發生時機:使用者把滑鼠游標移出網頁元件。適用元件:HTML4,N6,IE4:大部分元件N4:

layer,linkMouseMove發生時機:使用者在網頁上移動滑鼠游標。Mo49MouseOver發生時機:使用者把滑鼠游標移到網頁元件的上方。適用元件:HTML4,N6,IE4:大部分元件註:在超連結元件中,處理碼傳回true可制止超連結

的URL出現在狀態行中。MouseUp發生時機:使用者放開滑鼠的左鍵。適用元件:HTML4,N6,IE4:大部分元件Netscape:a,area,img,button,document,linkMouseOver發生時機:使用者把滑鼠游標移到網頁元件的上50<ahref=".tw"onmousedown='document.img1.src="down.jpg"'onmouseout='document.img1.src="normal.jpg"'onmouseover='document.img1.src="over.jpg"'><imgname="img1"src="normal.jpg"border=0></a>範例底下的滑鼠事件設定可製造出按鈕下壓的效果。不過只適用於IE,而不適用於Netscape4。<ahref=".tw"51鍵盤事件KeyDown發生時機:使用者按住鍵盤上的某一個鍵。適用元件:HTML4,N6,IE4:表單元件和body元件N4:

input,textarea註:處理碼可傳回false來取消輸入的字元。鍵盤事件KeyDown發生時機:使用者按住鍵盤上的某一個鍵。52KeyPress發生時機:使用者按下然後放開鍵盤上的某一個鍵。適用元件:HTML4,N6,IE4:表單元件和body元件N4:

input,textarea註:處理碼可傳回false來取消輸入的字元。KeyUp發生時機:使用者放開鍵盤上的某一個鍵。適用元件:HTML4,N6,IE4:表單元件和body元件N4:

input,textareaKeyPress發生時機:使用者按下然後放開鍵盤上的某一個鍵53表單事件Blur發生時機:使用者把輸入游標移出網頁元件。適用元件:HTML4,N2,IE3:button,input,label,select,textareaN3,IE4:

bodyFocus發生時機:使用者把輸入游標移入網頁元件。適用元件:HTML4,N2,IE3:button,input,label,select,textareaN3,IE4:

body表單事件Blur發生時機:使用者把輸入游標移出網頁元件。Fo54Change發生時機:表單元件的內容改變了。適用元件:HTML4,N2,IE3:input,select,textareaReset發生時機:使用者按下表單的reset按鈕。適用元件:form註:處理碼可傳回false來取消表單的重置。Change發生時機:表單元件的內容改變了。Reset發生時55Select發生時機:使用者拉選input或textArea內的文字。適用元件:input,textAreaSubmit發生時機:使用者按下表單的submit按鈕。適用元件:form註:處理碼可傳回false來取消表單的傳送。Select發生時機:使用者拉選input或textA56文件事件Load發生時機:文件載入瀏覽器視窗之後。適用元件:HTML4,N2,IE3:body,framesetN3,IE4:imgN6,IE4:iframe,objectUnload發生時機:離開網頁時。適用元件:HTML4,N2,IE3:body,frameset文件事件Load發生時機:文件載入瀏覽器視窗之後。Unloa57視窗事件Move發生時機:使用者移動瀏覽器視窗。適用元件:N4,IE4:body,framesetResize發生時機:使用者變更瀏覽器視窗的大小。適用元件:N4,IE4:body,frameset視窗事件Move發生時機:使用者移動瀏覽器視窗。Resize58其它事件Abort發生時機:當瀏覽者藉由選取另一個超連結、按下「停止」 按鈕、或其他的方式來放棄圖片的載入時。適用元件:N3,IE4:imgError發生時機:載入圖片時發生錯誤。適用元件:N3,IE4:img其它事件Abort發生時機:當瀏覽者藉由選取另一個超連結、按59指定事件處理碼的方法事件名稱和事件處理碼名稱在HTML標籤中指定事件處理碼在JavaScript程式中指定事件處理碼IE獨有的指定事件處理碼方式指定事件處理碼的方法事件名稱和事件處理碼名稱60事件名稱和事件處理碼名稱只要在事件名稱之前加上on就是事件處理碼的名稱。譬如:事件Abort的處理碼是onAbort、事件MouseDown的處理碼是onMouseDown、…、等等。不過,由於HTML並不區別屬性名稱的大小寫,再加上JavaScript和XHTML都用小寫的事件處理碼名稱,所以目前的趨勢是用小寫的事件處理碼名稱。所以前述的大小寫混合的處理碼名稱可分別改寫成onabort和onmousedown。事件名稱和事件處理碼名稱只要在事件名稱之前加上on就是事61在HTML標籤中指定事件處理碼若要處理某特定事件,你可以在處理該事件的元件標籤中,設定代表該事件的處理碼屬性;此屬性的值是一段處理該事件的JavaScript程式。指定的方式如下:<tag

eventHandler="JavaScriptCode">譬如:<IMGSRC=image.gifonabort="alert('Areyoureallytoobusytowait?')">指定事件處理碼:當瀏覽者藉由選取另一個超連結、按下「停止」按鈕、或其他的方式來放棄圖片的載入時。在HTML標籤中指定事件處理碼若要處理某特定事件,你可以62範例<bodyoncontextmenu="returnfalse"onselectstart="returnfalse"oncopy="returnfalse">有些網路小說網站用底下的事件處理碼設定技巧來防止瀏覽者拷貝網頁的文字:取消瀏覽器滑鼠右鍵的功能取消瀏覽器選取網頁內容的功能取消瀏覽器拷貝網頁內容的功能不過這個技巧僅適用於IE瀏覽器,對其他瀏覽器無效。範例<bodyoncontextmenu="return63在JavaScript程式中指定事件處理碼每個HTML元件的事件屬性都有對應的JavaScript屬性。因此,我們可以用JavaScript來指定元件的事件處理碼。譬如:<formname=myform><inputname=b1type=buttonvalue=“按我吧!”></form><script>document.myform.b1.onclick=function(){alert(“謝謝”);};</script>事件屬性事件屬性的值必須是一個函式在JavaScript程式中指定事件處理碼每個HTML64範例<script>functionconfirmLink(){returnconfirm(“確定要連到“+this.href+“?”);}functionconfirmAllLinks(){for(vark=0;k<document.links.length;k++)Document.links[k].onclick=confirmLink;}</script>…<bodyonload=“confirmAllLinks();”>下面的程式使得按網頁中任一的超連結,都會先出現一個詢問是否要連結的對話視窗。範例<script>下面的程式使得按網頁中任一的超連結,都會65IE獨有的指定事件處理碼方式IE4以上的IE瀏覽器提供以下範例所示的事件處理碼指定方式:<scriptfor=warning>alert(“Don’tpushme!”);</script>…<inputtype=buttonid=warningvalue=“Clickme”>兩者的屬性值相同IE獨有的指定事件處理碼方式IE4以上的IE瀏覽器66事件處理碼的傳回值一般而言,若事件處理碼的傳回值是false的話,會制止瀏覽器處理該事件的預設行為。比方說,按下表單的傳送按鈕,瀏覽器會開始傳送表單內容回伺服器。下面的例子示範如何取消傳送表單:<script>validate_form(){//checkformdataif(bad_data)returnfalse;}…<formonsubmit=“returnvalidate_form();”>事件處理碼的傳回值一般而言,若事件處理碼的傳回值是fals67上面規則的一個例外情形

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论