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

您當前所在位置：首頁 → 網絡編程 → JAVA編程 → JavaScript基本語法－JavaScript的事件

JavaScript基本語法－JavaScript的事件

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

javaScript是基于對象（object-based的語言。而基于對象的基本特征，就是采用事件驅動（event-driven）。它是在圖形界面的環(huán)境下,使得一切輸入變化簡單化.通常鼠標或熱鍵的動作我們稱之為事件(Event)，而由鼠標或熱鍵引發(fā)的一連串程序的動作，稱之為事件驅動（Event Driver）。而對事件進行處理程序或函數，我們稱之為事件處理程序（Event Handler）。
利用JavaScript的事件，主要有下面兩個用途：
●  驗證用戶輸入窗體的數據
●  增加頁面的動態(tài)效果
一般來說，一個利用JavaScript實現(xiàn)交互功能的Web網頁總是有3個部分的內容：
●  在Head部分定義一些 javascript函數，其中的一些可能是事件處理函數，另外一些可能是為了配合這些事件處理函數而編寫的普通函數。
●  HTML本身的各種控制標記。
●  擁有句柄屬性的 HTML標記，主要涉及到一些界面元素。這些元素可以把HTML同JavaScript代碼相連。
為了理解JavaScript的事件處理模型，可以設想一下在一個Web頁面可能會遇到怎樣的用戶響應。歸納起來，必須使用的事件主要有3大類：
一類是引起頁面之間跳轉的事件，主要是超鏈接事件；在一類是瀏覽器自己引起的事件，例如網頁的裝載、表單的提交等；另一類事件是在表單內部同界面對象的交互，包括界面對象的選定、改變等�？梢园凑諔贸绦虻木唧w功能自由設計。
onClick事件
鼠標單擊事件是最常見的事件之一，當用戶單擊鼠標按鈕時。同時onClick指定的事件處理程序或代碼將被調用執(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="請點擊我" onClick=alert("你好！")>
12  </Form>
13  </BODY>
14  </HTML>
文件說明
第11行使用 onClick事件彈出警告提示對話框。
onChange事件
onChange事件就是當文本框的內容改變時發(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事件，當文本框內容發(fā)生改變的時候彈出警告提示對話框。
onSelect事件
onSelect事件就是當文本框的內容被選中時發(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事件，當文本框中內容被選中的時候，警告提示對話框顯示的結果。
onFocus事件
onFocus事件就是當光標落在文本框中時發(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("我成為了輸入焦點！")>
13  </Form>
14  </BODY>
15  </HTML>
文件說明
第12行使用Onfocus事件，當用鼠標選中第二個文本框的時候，自動觸發(fā)Onfocus事件，彈出一個對話框。
onLload事件
onload事件是當前的網頁被顯示時發(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事件，當打開網頁的時候自動打開一個警示框。
onUnload事件
onUnload事件是當當前的網頁被關閉時發(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事件，當關閉網頁的時候自動打開一個警示框。
onBlur事件
onBlur事件就是當光標離開文本框中時發(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("我失去了輸入焦點！")>
13  </Form>
14  </BODY>
15  </HTML>
文件說明
第12行使用onBlur事件，當用鼠標離開第二個文本框的時候，自動觸發(fā)onBlur事件，彈出一個對話框。
onMouseover事件
onMouseover事件是指當鼠標移動到頁面元素上方時發(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事件，當鼠標指向滾動文字的時候，自動觸發(fā)onMouseover事件。
onMouseout事件
onmouseout事件是指當鼠標離開頁面元素上方時發(fā)生的事件。
文件范例：15-22.htm
在腳本中使用onmo

關鍵詞標簽：事件,基本,語法,-->

相關閱讀

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

熱門文章 eclipse中如何設置字體大小_eclipse字體大小eclipse中如何設置字體大小_eclipse字體大小

相關下載

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