JavaWeb10.6【JS：事件监听机制】
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>
