JavaWeb10.6【JS：事件监听机制】

 1 DOCTYPE html>
 2 html lang="en">
 3 head>
 4     meta charset="UTF-8">
 5     title>Titletitle>
 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();"> 
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     
89 body>
90 html>