版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)
文檔簡介
JavaScript中的瀏覽器對象第九
章內(nèi)容回顧對象this語句with語句new操作符eval函數(shù)字符串對象Math對象Date對象2本章目標JavaScript中的通用事件瀏覽器對象-屬性和方法3事件對`象概念(P129)事件是在網(wǎng)頁上進行的操作。事件可以由用戶生成,叫做用戶事件。也可以由系統(tǒng)生成,叫做系統(tǒng)事件。每個事件都有與之相關(guān)聯(lián)的Event對象Event對象提供下列信息:事件類型事件發(fā)生時光標的位置使用的是哪個鼠標按鈕有沒有使用功能鍵Event對象是用作事件處理程序的一部分,不能直接與Windows對象一同使用。4事件的生命周期(P129)事件的生命周期通常包含下列階段:與發(fā)生的事件相關(guān)聯(lián)的用戶操作或條件立即更新Event對象以反映事件的狀態(tài)觸發(fā)事件調(diào)用相關(guān)聯(lián)的事件處理程序事件處理程序執(zhí)行其操作并返回5頁面元素事件(P129)與各種頁面元素相關(guān)聯(lián)的事件是“文檔對象模型(DOM)的一部分”,而不屬于JavaScript,只能說是JavaScript事件,所以事件名不是寫在<JavaScript>標記內(nèi)部,而是寫在<body>標記內(nèi)部的,但事件調(diào)用的程序可以是JavaScript代碼。6JavaScript事件(P129)onClick(表單元素的單擊事件)onChange(表單元素的內(nèi)容發(fā)生變化時發(fā)生)onFocus(得到焦點)onBlur(失去焦點)onMouseDown(按下鼠標時發(fā)生)nMouseUp(釋放鼠標時發(fā)生)onSubmit(表單提交,通常是“提交”(submit)按鈕來觸發(fā))7onClick
事件(P130)當用戶在某些表單元素、超文本鏈接或其他元素上單擊鼠標左鍵時發(fā)生此事件<HTML> <HEAD> <TITLE></TITLE> <SCRIPTLANGUAGE=javascript> <!-- functionsum(x,y) //定義一個計算2數(shù)之和的函數(shù) {
myForm.num.value=eval(x)+eval(y); myForm.num.focus(); //讓"和"文本框得到焦點 } --> </SCRIPT> </HEAD> <BODY> <FormName="myForm">
第一個數(shù):<InputType="text"Name="num1"Size=10>
第二個數(shù):<InputType="text"Name="num2"Size=10>
和:<InputType="text"Name="num"Size=10> <InputType="Button"Name="js"Value="計算"onclick="sum(num1.value,num2.value)"> </Form> </BODY></HTML>8onChange
事件(P130)當文本控件或選擇列表中的某個選擇發(fā)生變化,且焦點離開時發(fā)生此事件<HTML><HEAD><TITLE></TITLE> <SCRIPTLANGUAGE="javascript"> <!-- functioncheckNum(num) { if(isNaN(num)==true) { alert("請輸入一個數(shù)字值");
returnfalse; } else { alert("謝謝合作!"); } } --> </SCRIPT> </HEAD> <BODYbgcolor="#34AC5B"> <Formname="myForm">
第一個數(shù):<INPUTtype="text"name="num1"onChange="checkNum(this.form.num1.value)"><br>
第一個數(shù):<INPUTtype="text"name="num2"><br> </Form> <SCRIPTLANGUAGE="javascript"> <!-- document.myForm.num1.focus(); //首先使文本框1獲得焦點 --> </SCRIPT> </BODY></HTML>9onFocus
事件和onBlur事件(P131)onFocus事件:當某個表單元素被激活,即擁有焦點時發(fā)生。onBlur事件:當焦點離開某個表單元素時發(fā)生。<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <FORMname="myForm"> <InputType="text"name="text1"onfocus="alert('歡迎光臨')"onblur="alert('歡迎再來')"> <Inputtype="text"> <INPUTtype="text"name="text2"onfocus="(document.bgColor='red')"onblur="(document.bgColor='green')"> </FORM> </BODY></HTML>10onMouseOver事件和onMouseOut
事件(P132)onMouseOver事件:當鼠標光標懸停在元素上時發(fā)生onMouseOut
事件:當鼠標光標離開元素上時發(fā)生<HTML> <HEAD> <SCRIPTLANGUAGE=javascript> <!-- functiontxtOver() { myForm.text1.value="歡迎光臨"; }
functiontxtOut() { myForm.text1.value="歡迎再來"; } --> </SCRIPT> </HEAD> <BODY> <Formname="myForm"> <InputType="text"name="text1"size="50"onMouseOver="txtOver()"onMouseOut="txtOut()"> </Form> </BODY></HTML>11onLoad
事件(P133)當一個文檔或圖像加載完畢時發(fā)生<HTML> <HEAD> <SCRIPTLANGUAGE=javascript> <!-- functionHello() { alert("歡迎來到Javascript"); } //--> </SCRIPT> </HEAD> <BODYonLoad="Hello()"> </BODY></HTML>12onSubmit
事件(P133)當用戶單擊“提交”按鈕時,在實際提交表單內(nèi)容之前發(fā)生。<HTML><HEAD> <SCRIPTLANGUAGE=javascript> <!-- functioncheck() { if(myF.value=="") { alert("請輸入姓名");
myF.focus(); myForm.action=""; } } --> </SCRIPT> </HEAD> <BODY> <Formname="myForm"action="deal.htm"onsubmit="check()"> <Inputtype="text"name="name"> <INPUTtype="submit"value="Submit"id="submit1"name="submit1"> </Form> </BODY></HTML>13onMouseDown事件:當鼠標按鈕按下還沒松開之前發(fā)生onMouseUp事件:當鼠標按鈕松開時發(fā)生<HTML> <HEAD> </HEAD> <BODY> <FORM> <INPUTtype="button"name="text1"value="改變顏色"onmousedown="(document.bgColor='red')"onmouseup="(document.bgColor='green')"> </FORM> </BODY></HTML>onMouseDown
事件和onMouseUp事件(P133)14onResize事件
(P134)當用戶或腳本在調(diào)整窗口或框架時發(fā)生<HTML> <HEAD> <scriptlanguage="JavaScript"> <!-- window.onresize=notify;
functionnotify() { alert("窗口大小調(diào)整完畢!"); } --> </script> </HEAD> <BODY> <P>請調(diào)整窗口大小?</P> </BODY></HTML>15處理事件(P135)為響應事件而執(zhí)行的JavaScript代碼段稱為事件處理程序事件處理程序分為:HTML標記事件處理程序的語法
<標記事件類型=“函數(shù)名()">
注:函數(shù)里面的是JavaScript代碼
以屬性的形式出現(xiàn)的事件處理程序
對象名.事件類型=函數(shù)名;注:函數(shù)里面的是JavaScript代碼16HTML標記事件處理程序示例(P135)必須指定標記和事件處理程序?qū)傩?,然后將JavaScript代碼指定給事件處理程序<HTML> <HEAD> <TITLE>我的主頁</TITLE> <SCRIPTLANGUAGE="JavaScript"> <!-- functiongreeting() { alert("歡迎您來做客"); } --> </SCRIPT> </HEAD> <BODYonLoad="greeting()"> </BODY></HTML>17以屬性的形式出現(xiàn)的事件處理程序示例(P136)優(yōu)點是可靈活地選擇事件處理程序,并在需要時修改事件處理程序<HTML> <HEAD> <SCRIPTLANGUAGE="JavaScript"> <!-- functiongreeting() { alert("歡迎您來做客"); }
window.onload=greeting; --> </SCRIPT> </HEAD> <BODY> </BODY></HTML>
18通用瀏覽器對象(P136)瀏覽器是用于顯示HTML文檔內(nèi)容的應用程序瀏覽器還公開了一些可在腳本中訪問和使用的對象。IE瀏覽器對象Netscape瀏覽器對象19文檔對象模型(P137)最低公用標準的文檔對象層次windowframeselftopparentdocumenthistorylocationlinkformanchortextselectradiobuttonresettextareacheckboxoptionsubmit20Window對象(瀏覽器的主容器)(P137)Window對象表示瀏覽器的窗口,可用于檢索有關(guān)窗口狀態(tài)的信息。屬性Document (HTML文檔)event (事件的狀態(tài))history (客戶訪問過和URL的信息)location (當前URL的信息)name (窗口或框架的名稱)Screen (屏幕和顯示性能的信息)
Status(狀態(tài)欄信息)方法alert (對話框)blur (失去焦點并觸發(fā)onblur事件)close (關(guān)閉)focus (得到焦點)Navigate (加載URL到當前窗口)Open (打開新窗口顯示指定的URL文檔)21Document對象(P138)Document對象表示給定瀏覽器窗口中的HTML文檔,用于檢索有關(guān)該文檔的信息。屬性alinkColorbgColorbodyfgColorlinkColorlocationtitleURLvlinkColor
方法clearcloseopenwritewriteln
22History對象(P139)此對象提供客戶最近訪問過的URL列表。方法
back
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年度個人房產(chǎn)抵押擔保貸款保險合同范本2篇
- 二零二五年度車輛運輸水工鵝卵石運輸協(xié)議3篇
- 2025年個人股東股權(quán)增資擴股合同模板4篇
- 設(shè)計思維解鎖創(chuàng)意潛能的鑰匙
- 2025年度大學生實習實訓基地實習崗位合作協(xié)議
- 2025年度個人戶外運動裝備過橋資金借款合同3篇
- 網(wǎng)絡(luò)安全實訓室的應急預案制定及實施
- 2025年度工傷賠償協(xié)議范本發(fā)布通知3篇
- 二零二五年度車牌號碼拍賣合同書4篇
- 2025版新型材料研發(fā)項目施工保密協(xié)議書3篇
- 合成生物學在生物技術(shù)中的應用
- 中醫(yī)門診病歷
- 廣西華銀鋁業(yè)財務(wù)分析報告
- 無違法犯罪記錄證明申請表(個人)
- 電捕焦油器火災爆炸事故分析
- 大學生勞動教育PPT完整全套教學課件
- 繼電保護原理應用及配置課件
- 《殺死一只知更鳥》讀書分享PPT
- 蓋洛普Q12解讀和實施完整版
- 2023年Web前端技術(shù)試題
- 品牌策劃與推廣-項目5-品牌推廣課件
評論
0/150
提交評論