JavaScript常用事件總結

原創 sinmo 2018-09-11 03:43

常用的JavaScript事件例子，自己理解，如果有不對或不足希望大家指出來！
onmouseover、onmouseout、onchange、onfocus、onblur、onsubmit、onclick、onload和onunload
 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5.     <title>javascript常用驗證</title> 
  6.     <style> 
  7.           
  8.     </style> 
  9.       
  10.     <script type="text/javascript"> 
  11.         function mouseOver(){  
  12.             alert("當鼠標移入時觸發事件...");  
  13.         }  
  14.         function mouseOut(){  
  15.             alert("當鼠標移出時出發事件...");  
  16.         }  
  17.         function checkEmail(str){  
  18.             if (str.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)   
  19.                 return alert("you are right!!");  
  20.             else   
  21.                 alert("oh,no!!!");  
  22.         }  
  23.         function   
  24.             alert("哈哈，我是onload事件，在頁面加載時會執行我的....")  
  25.         }  
  26.         function onUnloadEvent(){  
  27.             alert("哈哈，我是unonload事件，在頁面離開的時候會執行的....");  
  28.         }  
  29.         function onClickEvent(){  
  30.             alert("我是鼠標點擊事件哈哈...");  
  31.         }  
  32.         function a(){  
  33.             document.getElementById("trId").style.cssText="background-Color:#00F";  
  34.         }  
  35.         function b(){  
  36.             document.getElementById("trId").style.cssText="background-Color:#fff";  
  37.         }  
  38.         function c(){  
  39.             document.getElementById("inputId").focus();  
  40.             document.getElementById("inputId").select();  
  41.         }  
  42.         function setFocusStyle(){  
  43.             document.getElementById("lname").style.background="yellow";  
  44.         }  
  45.         function setFocusStyle1(){  
  46.             document.getElementById("fname").style.background="yellow";  
  47.         }  
  48.         function setOnblurStyle(){  
  49.             document.getElementById("lname").style.background="red";  
  50.         }  
  51.         function setOnblurStyle1(){  
  52.             document.getElementById("fname").style.background="red";  
  53.         }  
  54.     </script> 
  55. </head> 
  56.  
  57. <body onload="onloadEvent()"> 
  58. <a href="http://www.w3school.com.cn" onmouseover="mouseOver()">你點我啊,當鼠標被移動到某個元素自上時觸發的事件</a><br><br> 
  59. <a href="http://www.w3school.com.cn" onmouseout="mouseOut()">你點我啊,當鼠標從某個元素上面一開時觸發的事件</a><br><br> 
  60. <a href="http://www.w3school.com.cn" onmouseout="mouseOver()">你點我啊</a><br><br> 
  61. onchange事件(當用戶改變某個域的內容時觸發的事件)：<br> 
  62. <input type="text" id="email" size="30" onchange="checkEmail(this.value)" value=""/><br><br>   
  63. <form> 
  64. <table border="1" bgcolor="" width="30%" class=""> 
  65.     <tr><td align="center">a1</td></tr> 
  66.     <tr><td align="right">a2</td></tr> 
  67.     <tr><td align="right">a3</td></tr> 
  68.     <tr><td align="left">a4</td></tr> 
  69.     <tr><input type="button" id="buttonId" value="OK5" onClick="onClickEvent()"/></tr> 
  70. </table> 
  71. </form> 
  72.  
  73. <table class="table2"  cellpadding="0" border="1" bordercolor="#0033FF"  > 
  74.     <tr align="center" onmouseover="this.style.backgroundColor='#00F';" onmouseout="this.style.backgroundColor='#fff';"> 
  75.         <th class="th1" align="center">登記</th> 
  76.         <th class="th1" align="center">通過鼠標移入移出事件來改變行的顏色</th> 
  77.     </tr> 
  78.     <tr onmouseover="this.style.backgroundColor='#00F';" onmouseout="this.style.backgroundColor='#fff';"> 
  79.         <th>A0000001</th> 
  80.         <td>鼠標移入我變色</td> 
  81.     </tr> 
  82.     <tr id="trId" onmouseover="a()" onmouseout="b()"> 
  83.         <th>A0000002</th> 
  84.         <td>鼠標移出我又變色</td> 
  85.     </tr> 
  86. </table> 
  87. <br> 
  88. 自身獲得焦點，但獲得焦點的標誌是該文本框內出現輸入光標<br> 
  89. 如果要讓裏面的內容全部被選中，還必須使用this.select();<br> 
  90. <input type="text" name="url" value="http://www.gxblk.com" size="30" onmousemove="this.focus();this.select();"><br> 
  91. <input id="inputId" type="text" name="url" value="http://www.gxblk.com" size="30" onmousemove="this.focus();this.select();"><br> 
  92. onfocus事件舉例(當點擊輸入框的時候獲得焦點會觸發獲得焦點事件，當點擊到別處時會失去焦點會觸發失去焦點事件)：<br> 
  93. First Name:<input id="fname" type="text" onfocus="setFocusStyle1()" onblur="setOnblurStyle1()"><br> 
  94. Last Name:<input id="lname" type="text" onfocus="setFocusStyle()" onblur="setOnblurStyle()"/><br> 
  95.  
  96. onsubmit與onclick的區別：onsubmit是表單提交時觸發，onclick是按鈕點擊時觸發(onclick對button有效)：<br> 
  97. 一個是提交表單操作，把東西傳給服務器，一個是鼠標的單擊操作；<br> 
  98. 當然，onclick可以通過js來觸發onsubmit事件，如通過onclick觸發一個函數，在函數裏面調用document.form.submit();就可以觸發表單提交事件呵..<br> 
  99. onsubmit事件用法：<input type="submit" value="submit" /> 
  100. <form name="form" action="#" method="post" onsubmit="check();">     
  101.       <p><label>稱呼:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="text" name="name" id="name" /></p>     
  102.       <p><label>發表留言:</label><textarea name="contents" id="contents" cols="15" rows="5"></textarea><</p>     
  103.       <p class="noborder"><input type="submit" value="submit" /><input type="reset" value="reset"/><p>     
  104.       </form>     
  105.     <script type="text/javascript"> 
  106.         function check(){  
  107.             var name=document.getElementById("name").value;  
  108.             var contens=document.getElementById("contents").value;  
  109.             if (name=="")  
  110.             {  
  111.                 alert("用戶名不能爲空onsubmit");  
  112.                 exit();  
  113.             }  
  114.             if (content=="")  
  115.             {  
  116.                 alert("內容不能爲空onsubmit");  
  117.                 exit();  
  118.             }  
  119.         }  
  120.     </script> 
  121. onclick事件用法：<input type="button" value="submit" onclick="check1()"/> 
  122. <form name="form" action="#" method="post"> 
  123.       <p><label>稱呼:</label><input type="text" name="name" id="name" /></p> 
  124.       <p><label>發表留言:</label><textarea name="contents" id="contents" cols="15" rows="5"></textarea></p> 
  125.       <p> 
  126.       <input type="button" value="submit" onclick="check1()"/> 
  127.       <input type="reset" value="reset"/><p> 
  128.       </form> 
  129.     <script type="text/javascript"> 
  130.         function check1(){  
  131.             var name=document.getElementById("name").value;  
  132.             var contents=document.getElementById("contents").value;  
  133.             if (name=="")  
  134.             {  
  135.                 alert("用戶名不能爲空  
  136.             }  
  137.             if (contents=="")  
  138.             {  
  139.                 alert("內容不能爲空  
  140.             }  
  141.         }  
  142.     </script> 
  143. </body> 
  144. </html> 

 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

編寫自適應高度的 textarea

CarterLi 2019-02-25 00:14:46

node遇上c++ --- 愛情來的太快(一) (沒有文章)

sewerganger 2019-02-24 22:55:07

進擊webpack4 （基礎篇二：配置）

槐破夢 2019-02-24 22:55:07

《劍指offer》分解讓複雜問題更簡單

ConardLi 2019-02-24 22:55:07

ggit (git gui) --- 開發記錄 (一)

sewerganger 2019-02-24 22:45:04

搞搞, 超星爾雅；

sewerganger 2019-02-24 22:44:54

近期前端發展計劃

Ashleysweetie 2019-02-24 22:32:41

JS module的導出和導入

KevinYan 2019-02-24 21:34:55

「前端面試題系列7」Javascript 中的事件機制（從原生到框架）

micherwa 2019-02-24 19:55:05

跨域的四種方式

上帝遺忘之子 2019-02-24 19:14:58

JS面試題之比較兩個對象是否相等？

幸福村的碼農 2019-02-24 17:35:07

JavaScript：函數防抖與函數節流

沉靜地閃光 2019-02-24 17:35:07

超級詳細的手寫webpack4配置來啓動vue2項目（附配置作用）

Sotyoyo 2019-02-24 16:44:37

QQ音樂播放地址api

要學習資料找我 2019-02-24 16:32:45

通信類

Ashleysweetie 2019-02-24 16:25:14