ylbtech-Event:事件(Event)對象 |
JS:1.6.0,事件(Event)返回頂部 |
HTML標記 | 事件 | 當....時候觸發此事件 |
---|---|---|
<A> | onClick | 用戶點擊超鏈接 |
onMouseOver | 鼠標移動到超鏈接上邊 | |
onMouseOut | 鼠標離開超鏈接 | |
<AREA> | onMouseOver | 鼠標移動到圖片 map 區域上邊 |
onMouseOut | 鼠標離開圖片 map 區域 | |
<BODY> | onBlur | 包含這個頁面的窗口 window 或 幀 frame 失去焦點的時候 |
onFocus | 包含這個頁面的窗口 window 或 幀 frame 獲得焦點的時候 | |
onLoad | 這個頁面下載完成的時候 | |
onUnload | 退出這個頁面的時候 | |
<FORM> | onReset | 按下 RESET (重置) 按鈕的時候 |
onSubmit | 按下 SUBMIT (提交) 按鈕的時候 | |
<IMG> | onAbort | 下載圖片的過程被用戶手動停止的時候 |
onLoad | 圖片下載完成的時候 | |
onError | 在客戶端接收圖片時有錯誤發生 | |
<INPUT> with TYPE="BUTTON" 或 "CHECKBOX" 或 "RADIO" 或 "RESET" |
onClick | 鼠標點擊時候 |
<INPUT> with TYPE="TEXT" 或 <TEXTAREA> |
onBlur | 獲得焦點的時候 |
onChange | 輸入框/文本框中的文本被改變的時候 | |
onFocus | 獲得焦點的時候 | |
onSelect | 輸入框/文本框中的文本被選中 (高亮顯示) 的時候 | |
<INPUT> with TYPE="SELECT" |
onBlur | 失去焦點的時候 |
onChange | 用戶改變了下拉列表框中的選擇 | |
onClick | 用戶使用鼠標點擊的時候 | |
onFocus | 獲得焦點的時候 |
JS:1.6.0.1,HTML 4.0 事件屬性返回頂部 |
HTML 4 的新特性之一是可以使 HTML 事件觸發瀏覽器中的行為,比方說當用戶點擊某個 HTML 元素時啟動一段 JavaScript。
在現代瀏覽器中都內置有大量的事件處理器。這些處理器會監視特定的條件或用戶行為,例如鼠標單擊或瀏覽器窗口中完成加載某個圖像。通過使用客戶端的 JavaScript,可以將某些特定的事件處理器作為屬性添加給特定的標簽,並可以在事件發生時執行一個或多個 JavaScript 命令或函數。
事件處理器的值是一個或一系列以分號隔開的 Javascript 表達式、方法和函數調用,並用引號引起來。當事件發生時,瀏覽器會執行這些代碼。例如,當您把鼠標移動到一個超鏈接時,會啟動一個 JavaScript 函數。支持 JavaScript 的瀏覽器支持 <a> 標簽中的一個特殊的 "mouse over"事件處理器 - 被稱為 onmouseover 來完成這項工作:
<a href="/index.html" onmouseover="alert('Welcome');return false"
></a>
下面的表格提供了標准的事件屬性,可以把它們插入 HTML/XHTML 元素中,以定義事件行為。
窗口事件 (Window Events)
僅在 body 和 frameset 元素中有效。
屬性 | 值 | 描述 |
---|---|---|
onload | 腳本 | 當文檔載入時執行腳本 |
onunload | 腳本 | 當文檔卸載時執行腳本 |
表單元素事件 (Form Element Events)
僅在表單元素中有效。
屬性 | 值 | 描述 |
---|---|---|
onchange | 腳本 | 當元素改變時執行腳本 |
onsubmit | 腳本 | 當表單被提交時執行腳本 |
onreset | 腳本 | 當表單被重置時執行腳本 |
onselect | 腳本 | 當元素被選取時執行腳本 |
onblur | 腳本 | 當元素失去焦點時執行腳本 |
onfocus | 腳本 | 當元素獲得焦點時執行腳本 |
圖像事件 (Image Events)
該屬性可用於 img 元素:
屬性 | 值 | 描述 |
---|---|---|
onabort | 腳本 | 當圖像加載中斷時執行腳本 |
鍵盤事件 (Keyboard Events)
在下列元素中無效:base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, 以及 title 元素。
屬性 | 值 | 描述 |
---|---|---|
onkeydown | 腳本 | 當鍵盤被按下時執行腳本 |
onkeypress | 腳本 | 當鍵盤被按下后又松開時執行腳本 |
onkeyup | 腳本 | 當鍵盤被松開時執行腳本 |
鼠標事件 (Mouse Events)
在下列元素中無效:base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title 元素。
屬性 | 值 | 描述 |
---|---|---|
onclick | 腳本 | 當鼠標被單擊時執行腳本 |
ondblclick | 腳本 | 當鼠標被雙擊時執行腳本 |
onmousedown | 腳本 | 當鼠標按鈕被按下時執行腳本 |
onmousemove | 腳本 | 當鼠標指針移動時執行腳本 |
onmouseout | 腳本 | 當鼠標指針移出某元素時執行腳本 |
onmouseover | 腳本 | 當鼠標指針懸停於某元素之上時執行腳本 |
onmouseup | 腳本 | 當鼠標按鈕被松開時執行腳本 |
JS:1.6.1,onclick事件返回頂部 |
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <script language="javascript"> function hello_girl() { alert("小姐,你好!"); } function fun1(str) { alert("你好,"+str); } </script> </head> <body> <h3>MENU:onclick 單擊事件</h3> <input type="button" value="問候先生" name="hello1" onclick="alert('先生,你好!')" /> <input type="button" value="問候女士" name="hello1" onclick="hello_girl()" /> <hr /> 有參數 <input type="button" value="先生" name="hello1" onclick="fun1('先生')" /> <input type="button" value="女士" name="hello1" onclick="fun1(this.value)" /> <hr /> <input type="button" value="女士" name="hello1" onclick="javascript:alert('你好嗎?')" /> <input type="button" value="你吃飯了嗎" name="hello1" onclick="javascript:return confirm('你確認吃飽了?')" /> </body> </html>
JS:1.6.2,onchange事件 返回頂部 |
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <script language="javascript" type="text/javascript"> function change(str) { document.getElementById("span1").innerText=str; } </script> </head> <body> <h3>MENU:onchange</h3> 電話:<input id="txtTel" type="text" onchange="change(this.value)" /><br /> 你填寫的電話為:<span id="span1"></span> </body> </html>
JS:1.6.3,onload事件返回頂部 |
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <script language="javascript"> function hello() { alert("新年快樂!"); } </script> </head> <body onload="hello()"> <h3>MENU:onload事件</h3> </body> </html>
JS:1.6.4,onunload事件,返回頂部 |
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <script language="javascript" type="text/javascript"> function logout() { var bool=confirm("你確認要退出嗎?"); if(bool) { //第一種情況,直接關閉頁面 //window.close(); //第二種情況,退出並跳轉到登陸頁面 location.href="http://www.baidu.com"; } } </script> </head> <body onunload="logout()"> <h3>MENU:onunload</h3> <input type="button" value="退出" onclick="logout()" /> </body> </html>
JS:1.6.5,onselect事件, 返回頂部 |
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <script language="javascript" type="text/javascript"> function change(str) { document.getElementById("span1").innerText=str; } </script> </head> <body> <h3>MENU:onselect</h3> 電話:<input id="txtTel" type="text" onselect="change(this.value)" /><br /> 你填寫的電話為:<span id="span1"></span> </body> </html>
JS:1.6.6,onmouse事件,返回頂部 |
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> </head> <body bgcolor="#CCCCCC"> <h3>onmouse事件</h3> <input type="button" value="改變顏色" onmousedown="document.bgColor='aqua'" onmouseup="document.bgColor='red'" onmouseout="document.bgColor='blue'"/> </body> </html>
JS:1.6.7,onfoucs_onblur事件,返回頂部 |
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <script language="javascript"> function begin() { usid.value=""; } function end() { alert("請輸入確認信息,謝謝!"); } </script> </head> <body> <h3>MENU:onfocus事件和onblur事件</h3> <input type="text" value="請輸入用戶名" name="usid" onfocus="begin()" onblur="end()" /> <input type="button" value="提交" /> </body> </html>
JS:1.6.8,checkbox-onclick事件, 返回頂部 |
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <script language="javascript"> function list(check_b,txt) { var str_S=txt.value; var str_C=check_b.value; if(check_b.checked==true) { txt.value=str_S+str_C; } else { str_S=str_S.replace(str_C,""); txt.value=str_S; } } </script> </head> <body> 我們選擇了:<input type="text" name="t_1" value="" readonly="true" /> <br /> <input type="checkbox" value="蘋果 " onclick="list(this,t_1)" >蘋果</input> <input type="checkbox" value="香蕉 " onclick="list(this,t_1)" >香蕉</input> <input type="checkbox" value="芹菜 " onclick="list(this,t_1)" >芹菜</input> </body> </html>
![]() |
作者:ylbtech 出處:http://ylbtech.cnblogs.com/ 本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利。 |