JavaScript事件处理常用事件（鼠标事件、键盘事件、表单事件）示例代码

共3个文件

html：3个

javascript

event

常用事件

需积分: 5 81 浏览量 2024-06-27 11:03:57 上传评论收藏 3KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

06common_events.zip （3个子文件）

09event_keyboard.html 1KB

08event_mouse.html 2KB

10event_form.html 3KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件处理-常用事件-表单事件</title> <style> div{ text-align: left; width: 400px; height: 400px; background-color: lightblue; } /* 由于浏览器中的文本框边框有默认的效果，所以需要先剔除原有效果再进行设置，否则可能不会成功 */ #username{ outline: none; } div .border{ border: 1px solid red; } #img{ width: 200px; height: 200px; } </style> <script> window.onload=function(){ //onfocus焦点事件 var focus_event = document.getElementById("username"); //触发焦点事件则将文本框附上一个class属性，并为文本框添加样式 focus_event.onfocus=function(){ console.log("focus_event"); this.className = "border"; }; //onblur焦点不在文本框后，将边框的设置剔除 focus_event.onblur=function(){ console.log("blur_event"); this.className = ""; }; //onselect选中文本内容后触发的事件 focus_event.onselect=function(){ console.log("select_event"); }; //onchange事件（一般用于文件选择器或复选框） document.getElementById("photo").onchange=function(){ console.log("onchange_event"); document.getElementById("img").src=window.URL.createObjectURL(this.files[0]); }; //submit表单提交事件 document.getElementById("formId").onsubmit=function(){ console.log("sumbit"); //不写return则默认返回true，此时提交后会立刻刷新页面，打印的内容只能看到一闪而过 // return true; //return false 可以阻止表单提交，此时可以看到打印的内容 return false; }; }; </script> </head> <body> <div > <form action="" id="formId"> 用户名：<input type="text" id="username"><br><br> 头像：<input type="file" id="photo" multiple><br><br> <img src="" id="img"><br><br> <input type="submit" value="提交"> </form> </div> </body> </html>

评论收藏

内容反馈