JS:1.6,事件(Event)(onclick,onchange,onload,onunload,onfocus,onblur,onselect,onmuse)


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>

 

warn 作者:ylbtech
出處:http://ylbtech.cnblogs.com/
本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM