JavaWeb10.6【JS：事件監聽機制】
阿新 • • 發佈：2021-06-28
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <script> 8 /*//1.失去焦點事件 9 document.getElementById("username").onblur = function(){ 10 alert("失去焦點了..."); 11 //直接寫在這裡，可能不會觸發（因為可能頁面資源載入不完全導致不能有效獲取所需物件）12 //放在body在下面可以，下面這種寫法也可以 13 }*/ 14 15 //2 載入完成事件 16 window.onload = function () { //頁面所有資源載入完成後執行這個函式 17 //1 失去焦點事件 18 /*document.getElementById("username").onblur = function(){ 19 alert("失去焦點了..."); 20 };*/ 21 22 //3 繫結滑鼠懸浮事件 23 /*document.getElementById("username").onmouseover = function(){ 24 alert("滑鼠來了"); 25 }; 26 document.getElementById("username").onmouseleave = function(){ 27 alert("滑鼠走了"); 28 };*/ 29 30 // 4 繫結滑鼠點選事件31 /*document.getElementById("username").onmousedown = function () { 32 alert("滑鼠點選"); 33 };*/ 34 /*document.getElementById("username").onmousedown = function (event) { 35 alert(event.button); //左鍵0 滾輪1 右鍵2 36 };*/ 37 38 // 5 鍵盤事件 39 /*document.getElementById("username").onkeydown = function (event) { 40 // alert(event.keyCode); //返回鍵入值的ASCLL碼值 41 if (event.keyCode == 13){ //鍵入資訊，回車提交 42 alert("提交表單"); 43 } 44 };*/ 45 46 //6 選擇和改變 47 document.getElementById("username").onchange = function (event) { 48 alert("改變了"); //只要框內內容改變就會觸發 49 }; 50 document.getElementById("city").onchange = function (event) { 51 alert("改變了"); 52 }; 53 54 //7 表單事件 55 /*//方式1 56 document.getElementById("form").onsubmit = function () { 57 var flag = false; 58 // .......驗證通過則令flag=true 59 return flag; 60 };*/ 61 62 }; 63 64 //方式2 65 function checkForm() { 66 // return false; 67 return true; 68 } 69 </script> 70 </head> 71 <body> 72 <form action="#" id="form" onclick="return checkForm();"> <!--注意方式2在此處要寫return--> 73 <input type="text" id="username" name="username"> 74 <select id="city"> 75 <option>--請選擇--</option> 76 <option>南京</option> 77 <option>杭州</option> 78 <option>蘇州</option> 79 </select> 80 <input type="submit" value="提交"> 81 </form> 82 83 <!--<script> 84 //1.失去焦點事件 85 document.getElementById("username").onblur = function(){ 86 alert("失去焦點了..."); 87 } 88 </script>--> 89 </body> 90 </html>