IT貓撲網(wǎng)：您身邊最放心的安全下載站！ 最新更新|軟件分類|軟件專題|手機(jī)版|論壇轉(zhuǎn)貼|軟件發(fā)布

您當(dāng)前所在位置：首頁 → 網(wǎng)絡(luò)編程 → JAVA編程 → JavaScript基本語法－JavaScript的事件

JavaScript基本語法－JavaScript的事件

時間：2015/6/28來源：IT貓撲網(wǎng)作者：網(wǎng)管聯(lián)盟我要評論(0)

javaScript是基于對象（object-based的語言。而基于對象的基本特征，就是采用事件驅(qū)動（event-driven）。它是在圖形界面的環(huán)境下,使得一切輸入變化簡單化.通常鼠標(biāo)或熱鍵的動作我們稱之為事件(Event)，而由鼠標(biāo)或熱鍵引發(fā)的一連串程序的動作，稱之為事件驅(qū)動（Event Driver）。而對事件進(jìn)行處理程序或函數(shù)，我們稱之為事件處理程序（Event Handler）。
利用JavaScript的事件，主要有下面兩個用途：
●  驗(yàn)證用戶輸入窗體的數(shù)據(jù)
●  增加頁面的動態(tài)效果
一般來說，一個利用JavaScript實(shí)現(xiàn)交互功能的Web網(wǎng)頁總是有3個部分的內(nèi)容：
●  在Head部分定義一些 javascript函數(shù)，其中的一些可能是事件處理函數(shù)，另外一些可能是為了配合這些事件處理函數(shù)而編寫的普通函數(shù)。
●  HTML本身的各種控制標(biāo)記。
●  擁有句柄屬性的 HTML標(biāo)記，主要涉及到一些界面元素。這些元素可以把HTML同JavaScript代碼相連。
為了理解JavaScript的事件處理模型，可以設(shè)想一下在一個Web頁面可能會遇到怎樣的用戶響應(yīng)。歸納起來，必須使用的事件主要有3大類：
一類是引起頁面之間跳轉(zhuǎn)的事件，主要是超鏈接事件；在一類是瀏覽器自己引起的事件，例如網(wǎng)頁的裝載、表單的提交等；另一類事件是在表單內(nèi)部同界面對象的交互，包括界面對象的選定、改變等�？梢园凑諔�(yīng)用程序的具體功能自由設(shè)計(jì)。
onClick事件
鼠標(biāo)單擊事件是最常見的事件之一，當(dāng)用戶單擊鼠標(biāo)按鈕時。同時onClick指定的事件處理程序或代碼將被調(diào)用執(zhí)行。
文件范例：15-14.htm>
在腳本中使用onClick事件。
01  <!-- ------------------------------ -->
02  <!-- 文件范例：15-14.htm -->
03  <!-- 文件說明：OnClick事件 -->
04  <!-- ------------------------------ -->
05  <HTML>
06  <HEAD>
07  <TITLE>OnClick事件</TITLE>
08  </HEAD>
09  <BODY>
10  <Form>
11  <Input type="button" Value="請點(diǎn)擊我" onClick=alert("你好！")>
12  </Form>
13  </BODY>
14  </HTML>
文件說明
第11行使用 onClick事件彈出警告提示對話框。
onChange事件
onChange事件就是當(dāng)文本框的內(nèi)容改變時發(fā)生的事件。
文件范例：15-15.htm
在腳本中使用onChange事件。
01  <!-- ------------------------------ -->
02  <!-- 文件范例：15-15.htm -->
03  <!-- 文件說明：OnChange事件 -->
04  <!-- ------------------------------ -->
05  <HTML>
06  <HEAD>
07  <TITLE>OnChange事件</TITLE>
08  </HEAD>
09  <BODY>
10  <Form>
11  <Input type="text" name="Test" value="Test" onChange=alert("TextBox值發(fā)生了變化！")>
12  </Form>
13  </BODY>
14  </HTML>
文件說明
第11行使用onChange事件，當(dāng)文本框內(nèi)容發(fā)生改變的時候彈出警告提示對話框。
onSelect事件
onSelect事件就是當(dāng)文本框的內(nèi)容被選中時發(fā)生的事件。
文件范例：15-16.htm
在腳本中使用onSelect事件
01  <!-- ------------------------------ -->
02  <!-- 文件范例：15-16.htm -->
03  <!-- 文件說明：OnSelect事件 -->
04  <!-- ------------------------------ -->
05  <HTML>
06  <HEAD>
07  <TITLE>OnSelect事件</TITLE>
08  </HEAD>
09  <BODY>
10  <Form>
11  <Input type="text" name="Test" value="Test" onSelect=alert("我被選中了！")>
12  </Form>
13  </BODY>
14  </HTML>
文件說明
第11行使用onSelect事件，當(dāng)文本框中內(nèi)容被選中的時候，警告提示對話框顯示的結(jié)果。
onFocus事件
onFocus事件就是當(dāng)光標(biāo)落在文本框中時發(fā)生的事件。
文件范例：15-17.htm
在腳本中使用onFocus事件。
01  <!-- ------------------------------ -->
02  <!-- 文件范例：15-17.htm -->
03  <!-- 文件說明：OnFocus事件 -->
04  <!-- ------------------------------ -->
05  <HTML>
06  <HEAD>
07  <TITLE>OnFocus事件</TITLE>
08  </HEAD>
09  <BODY>
10  <Form>
11  <Input type="text" name="Test1" value="Test1">
12  <Input type="text" name="Test2" value="Test2" onFocus=alert("我成為了輸入焦點(diǎn)！")>
13  </Form>
14  </BODY>
15  </HTML>
文件說明
第12行使用Onfocus事件，當(dāng)用鼠標(biāo)選中第二個文本框的時候，自動觸發(fā)Onfocus事件，彈出一個對話框。
onLload事件
onload事件是當(dāng)前的網(wǎng)頁被顯示時發(fā)生的事件。
文件范例：15-18.htm
在腳本中使用onload事件
01 <!-- ------------------------------ -->
02  <!-- 文件范例：15-18.htm -->
03  <!-- 文件說明：OnLoad事件 -->
04  <!-- ------------------------------ -->
05  <HTML>
06  <HEAD>
07  <TITLE>OnLoad事件</TITLE>
08  </HEAD>
09  <BODY onLoad=alert("正在載入！")>
10  <Form>
11  </Form>
12  </BODY>
13  </HTML>
文件說明
第9行使用OnLoad事件，當(dāng)打開網(wǎng)頁的時候自動打開一個警示框。
onUnload事件
onUnload事件是當(dāng)當(dāng)前的網(wǎng)頁被關(guān)閉時發(fā)生的事件。
文件范例：15-19.htm
在腳本中使用onUnload事件
01  <!-- ------------------------------ -->
02  <!-- 文件范例：15-19.htm -->
03  <!-- 文件說明：OnUnLoad事件 -->
04  <!-- ------------------------------ -->
05  <HTML>
06  <HEAD>
07  <TITLE>OnUnLoad事件</TITLE>
08  </HEAD>
09  <BODY onUnLoad=alert("歡迎再來！")>
10  <Form>
11  </Form>
12  </BODY>
13  </HTML>
文件說明
第9行使用onUnload事件，當(dāng)關(guān)閉網(wǎng)頁的時候自動打開一個警示框。
onBlur事件
onBlur事件就是當(dāng)光標(biāo)離開文本框中時發(fā)生的事件。
文件范例：15-20.htm
在腳本中使用onBlur事件
01  <!-- ------------------------------ -->
02  <!-- 文件范例：15-20.htm -->
03  <!-- 文件說明：OnBlur事件 -->
04  <!-- ------------------------------ -->
05  <HTML>
06  <HEAD>
07  <TITLE>OnBlur事件</TITLE>
08  </HEAD>
09  <BODY>
10  <Form>
11  <Input type="text" name="Test1" value="Test1">
12  <Input type="text" name="Test2" value="Test2" onBlur=alert("我失去了輸入焦點(diǎn)！")>
13  </Form>
14  </BODY>
15  </HTML>
文件說明
第12行使用onBlur事件，當(dāng)用鼠標(biāo)離開第二個文本框的時候，自動觸發(fā)onBlur事件，彈出一個對話框。
onMouseover事件
onMouseover事件是指當(dāng)鼠標(biāo)移動到頁面元素上方時發(fā)生的事件。
文件范例：15-21.htm
在腳本中使用onMouseover事件
01  <!-- ------------------------------ -->
02  <!-- 文件范例：15-21.htm -->
03  <!-- 文件說明：onMouseOver事件 -->
04  <!-- ------------------------------ -->
05  <HTML>
06  <HEAD>
07  <TITLE>onMouseOver事件</TITLE>
08  </HEAD>
09  <BODY>
10  <Marquee onMouseOver=this.stop()>滾動新聞</Marquee>
11  </BODY>
12  </HTML>
文件說明
第10行使用onMouseover事件，當(dāng)鼠標(biāo)指向滾動文字的時候，自動觸發(fā)onMouseover事件。
onMouseout事件
onmouseout事件是指當(dāng)鼠標(biāo)離開頁面元素上方時發(fā)生的事件。
文件范例：15-22.htm
在腳本中使用onmo

關(guān)鍵詞標(biāo)簽：事件,基本,語法,-->

相關(guān)閱讀

文章評論
發(fā)表評論

熱門文章 eclipse中如何設(shè)置字體大小_eclipse字體大小eclipse中如何設(shè)置字體大小_eclipse字體大小

相關(guān)下載

人氣排行 JS驗(yàn)證日期格式是否正確Java中3DES加密解密調(diào)用示例Java技術(shù)-J2EE開發(fā)日記-MyEclipse快捷鍵與插件大全用Java刪除文件夾里的所有文件JavaScript基本語法－常量和變量eclipse中如何設(shè)置字體大小_eclipse字體大小設(shè)置方法C#中的空值的判斷100多個很有用的JavaScript函數(shù)以及基礎(chǔ)寫法匯總