Java教程

JavaScript | 事件分类

本文主要是介绍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 当页面载入完毕后触发
unload 当页面关闭时触发

 

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

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

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

二、焦点事件

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

事件名称 事件触发时机

focus

当获得焦点时触发(不会冒泡)
blur 当失去焦点时触发(不会冒泡)

 

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

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

 

这篇关于JavaScript | 事件分类的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!