JS：各類不一樣事件觸發條件。onClick,onBlur等

時間  2019-11-07
標籤 各類 不一樣 事件 觸發 條件 onclick onblur 欄目 JavaScript 简体版
原文   原文鏈接

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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程