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>
复制代码

 

posted @   yub4by  阅读(69)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
点击右上角即可分享
微信分享提示