本篇文章给大家带来了关于javascript的相关知识 ， 其中主要介绍了关于鼠标事件以及键盘事件的相关问题 ， 还包括了页面事件、焦点事件、表单事件 ， 下面一起来看一下 ， 希望对大家有帮助 。
文章插图
【相关推荐：javascript视频教程、web前端】
页面事件思考：HTML页面是按照什么样的顺序进行加载的？
答案：页面的加载是按照代码的编写顺序 ， 从上到下依次执行的 。
会出现的问题：若在页面还未加载完成的情况下 ， 就使用JavaScript操作DOM元素 ， 会出现语法错误 。
【带你了解JavaScript中的键盘、鼠标事件】
文章插图
解决办法：页面事件可以改变JavaScript代码的执行时机 。
- load事件：用于body内所有标签都加载完成后才触发 ， 又因其无需考虑页面加载顺序的问题 ， 常常在开发具体功能时添加 。 unload事件：用于页面关闭时触发 ， 经常用于清除引用避免内存泄漏时使用 。
文章插图
焦点事件在Web开发中 ， 焦点事件多用于表单验证功能 ， 是最常用的事件之一 。
例如 ， 文本框获取焦点改变文本框的样式 ， 文本框失去焦点时验证文本框内输入的数据等 。
文章插图
为了让大家更好的掌握焦点事件的使用方法 ， 下面以验证用户名和密码是否为空进行演示 。
文章插图
代码实现
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>验证用户名和密码是否为空</title> <style> body{background:#ddd;} .box{background:#fff;padding:20px 30px;width:400px;margin: 0 auto;text-align:center;} .btn{width:180px;height:40px;background:#3388ff;border:1px solid #fff;color:#fff;font-size:14px;} .ipt{width:260px;padding:4px 2px;} .tips{width:440px;height:30px;margin:5px auto;background:#fff;color:red;border:1px solid #ccc;display:none;line-height:30px;padding-left:20px;font-size:13px;} </style> </head> <body> <p id="tips" class="tips"></p> <p class="box"> <p><label>用户名：<input id="user" class="ipt" type="text"></label></p> <p><label>密 码：<input id="pass" class="ipt" type="password"></label></p> <p><button id="login" class="btn">登录</button></p> </p> <script> window.onload = function() { addBlur($('user')); // 检测id为user的元素失去焦点后 ， value值是否为空 addBlur($('pass')); // 检测id为pass的元素失去焦点后 ， value值是否为空 }; function $(obj) { // 根据id获取指定元素 return document.getElementById(obj); } function addBlur(obj) { // 为指定元素添加失去焦点事件 obj.onblur = function() { isEmpty(this); }; } function isEmpty(obj) { // 检测表单是否为空 if (obj.value =https://www.52zixue.com/zhanzhang/webqd/js/04/16/70128/== '') { $('tips').style.display = 'block'; $('tips').innerHTML = '注意：输入内容不能为空! '; } else { $('tips').style.display = 'none'; } }