JavaScript中常用事件有哪些?

开发 前端
JavaScript是基于对象的脚本语言,它的一个最基本的特征就是采用事件鼎动。如,当鼠标指针经过某个按钮或者用户在文本框中输入某些信息时,都可以设置相应的JavaScript事件来完成某些特殊效果。下面,将对JavaScript中的常用事件进行详细讲解。

JavaScript是基于对象的脚本语言,它的一个最基本的特征就是采用事件鼎动。如,当鼠标指针经过某个按钮或者用户在文本框中输入某些信息时,都可以设置相应的JavaScript事件来完成某些特殊效果。下面,将对JavaScript中的常用事件进行详细讲解。

1.鼠标事件

鼠标事件是指通过鼠标动作触发的事件,鼠标事件有很多,下面列举几个常用的鼠标事件,如表所示。

类别

事件

事件说明

鼠标事件

onclick

鼠标单击时触发此事件

ondblclick

鼠标双击时触发此事件

onmousedown

鼠标按下时触发此事件

onmouseup

鼠标弹起时触发的事件

onmouseover

鼠标移动到某个设置了此事件的元素上时触发此事件

onmousemove

鼠标移动时触发此事件

onmouseout

鼠标从某个设置了此事件的元素上离开时触发此事件

2.键盘事件

键盘事件是指用户在使用键盘时触发的事件。例如,用户按【Esc】键关闭打开的状态栏,按【Enter】键直接完成光标的上下切换等。下面列举几个常用的键盘事件,如表15-16所示。

表15-16 JavaScript中常用的键盘事件

类别

事件

事件说明

键盘事件

onkeydown

当键盘上的某个按键被按下时触发此事件

onkeyup

当键盘上的某个按键被按下后弹起时触发此事件

onkeypress

当输入有效的字符按键时触发此事件

3.表单事件

表单事件是指对Web表单操作时发生的事件。例如,表单提交前对表单的验证,表单重置时的确认操作等。下面列举几个常用的表单事件,如表15-17所示。

表15-17 JavaScript中常用的表单事件

类别

事件

事件说明

表单事件

onblur

当前元素失去焦点时触发此事件

onchange

当前元素失去焦点并且元素内容发生改变时触发此事件

onfocus

当某个元素获得焦点时触发此事件

onreset

当表单被重置时触发此事件

onsubmit

当表单被提交时触发此事件

4.页面事件

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

<script>
document.getElementById('demo').onclick=function () {
alert('单击');
}
</script>
<button ide="demo">单击显示弹框</button>

在上述代码中,第2行代码利用getElementByldO获取id为demo的元素,并为其添加击”弹框;第6行代码定义了一个用于单击的按钮。当用户单击按钮时,页面就会弹出一个提示框。

责任编辑:华轩 来源: 今日头条
相关推荐

2011-11-21 16:49:58

日志常用事件

2010-05-21 16:33:02

MySQL数据库

2010-07-13 10:43:26

SQL Server数

2022-03-08 15:32:49

Python数据集合代码

2023-03-17 16:49:42

开发Java框架

2022-08-30 21:01:17

开发Java框架

2021-10-27 17:57:35

设计模式场景

2022-06-15 08:17:36

Monkey工具

2023-12-25 08:25:42

AndroidHook应用程序

2020-05-13 21:09:10

JavaScript前端技术

2023-12-01 07:10:01

JavascriptTypescript

2021-08-26 09:01:16

git 分布式Apache Subv

2022-06-06 07:35:26

MySQLInnoDBMyISAM

2009-09-03 17:59:18

C#调用事件

2022-02-23 15:36:46

ArkUI-eTS事件监听鸿蒙

2011-10-08 13:54:27

JavaScript

2010-05-31 10:35:12

MySQL数据类型

2022-08-24 17:04:19

软件测试数据集合测试效果

2024-04-01 11:43:51

Rust开发插件

2019-10-11 08:41:18

JavaMemcached数据库
点赞
收藏

51CTO技术栈公众号