JavaScript | 事件分类

一、页面事件

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

?

1 2 3 4 5

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

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

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

事件名称	事件触发时机
load	当页面载入完毕后触发
unload	当页面关闭时触发

 

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

?

1 2 3

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

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

二、焦点事件

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

事件名称	事件触发时机
focus	当获得焦点时触发（不会冒泡）
blur	当失去焦点时触发（不会冒泡）

 

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

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

?

1 2 3 4 5 6

<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）验证用户名和密码是否为空

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<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 值是否为空，若为空，则显示错误提示信息，否则隐藏提示信息框。接下来，以验证密码框为空进行测试即可。