标签：分类 obj 代码 JavaScript 事件 为空 页面

一、页面事件

在项目开发中，经常需要JavaScript对网页中的DOM元素进行操作，而页面的加载又是按照代码的编写顺序，从上到下依次执行。因此，若在页面还未记载完成的情况下，就使用JavaScript操作DOM元素，会出现语法错误，具体代码如下。

<script>
document.getElementById(' demo').onclick = function () { console.log('单击');};
</script>
<div id="demo">
</div>

　　在上述代码中，首先利用JavaScript代码获取 id 为demo的元素，然后为其添加click事件，并在事件处理函数中，通过控制台输出提示信息“单击”。最后在 JavaScript代码后设计了一 id 为demo 的<div>元素，用于进行页面单击。

　　在控制台有错误提示，原因是页面在加载的过程中，没有获取到相应的元素对象。为了解决此问题，JavaScript提供了页面事件，可以改变JavaScript代码的执行时机。

load事件用于body内所有标签都加载完成后才触发，又因其无需考虑页面加载顺序的问题，常常在开发具体功能时添加。unload 事件用于页面关闭时触发，开发中经常用于清除引用，避免内存泄漏。接下来，将上述 JavaScript 代码放到 load 事件的处理程序中，具体代码如下。

window.onload = function() {
// JavaScript代码
};

　　按照上述代码修改后，只有当 HTML 文本全部加载到浏览器中时，才会触发 load 事件。

二、焦点事件

 在web开发中，焦点事件多用于表单验证功能，是最常用的事件之一。例如，文本框获取焦点改变文本框的样式，文本框失去焦点时验证文本框输入的数据等。常用的焦点事件如下表。

下面以验证用户名和密码是否为空进行演示。

（1）编写HTML，实现用户登录的表单

<div id="tips"></div>
<div class="box">
<label>用户名:<input id="user" type="text"></label> 
<label>密 码: <input id="pass" type="password"></label> 
<button id="login">登录</button>
</div>

上述第1行代码用于显示错误提示信息， 默认情况下隐藏，只有当文本框失去焦点，并且未填写任何内容时显示。
（2）验证用户名和密码是否为空

<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=-"') { 
$('tips').style.display='block'; 
$('tips').innerHTML='注意:输入内容不能为空!"; 
} else { 
$('tips').style.display = 'none'; 
}
}
</script>

　　在上述代码中，第2~5行代码用于在页面加载完成后，调用自定义函数检测用户名和密码是否为空；第 6~8 行代码封装的$()函数用于根据id值获取元素对象，方便程序开发;第9-13行代码封装的 addBlur()函数，用于为指定元素添加失去焦点事件及其事件处理程序;第14~21代码用于检测指定元素对象 obj 的 value 值是否为空，若为空，则显示错误提示信息，否则隐藏提示信息框。接下来，以验证密码框为空进行测试即可。

标签：分类,obj,代码,JavaScript,事件,为空,页面
来源： https://www.cnblogs.com/ymdx/p/16260431.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。