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

时间：2021-06-28 21:20:20 收藏：0 阅读：0
技术图片
 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>