集团官网
  • 华为授权培训中心
  • 腾讯云一级认证培训中心
  • 百度营销大学豫陕深授权运营中心
  • Oracle甲骨文OAEP中心
  • Microsoft Azure微软云合作伙伴
  • Unity公司战略合作伙伴
  • 普华基础软件战略合作伙伴
  • 新开普(股票代码300248)旗下丹诚开普投资
  • 中国互联网百强企业锐之旗旗下锐旗资本投资

JavaScript中常用事件有哪些?

编辑:云和数据 日期:2023-03-17 17:05

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元素,会出现语法错误,例如下面的示例代码:

单击显示弹框

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

相关内容

如何针对接口设计测试用例 ? 当我们拿到一个接口,怎么才能设计出更好的测试用例呢?从大的方面我们至少要考虑到以下三个方面。第一:功能测试第二:性能测试第三:安全性测试一、功能方面在功能方面,我们要更多考虑的是如何通过不同的输入覆盖不同的业务逻辑。而这个业务逻辑也可以理解为代码的每一个分支语句,所以,我们的测试就变为如何通过... 怎样下载和安装HBuilder软件? HBuilder是一款深度集成Eelipse的IDE编辑器,但其主要集中在Web前端的开发,不能进行Java等后台开发。HBuilder提供了对JavaScrijpt、jQuery、HTML5+、MUI等语法的提示功能,同时包含很多快捷键,让前端开发更加便捷。访问HBuilder官方网站(ht... web前端框架有哪些?学web前端开发用什么软件? 框架是提供一套完整的解决方案,按照规定好的代码结构来做编排。前端框架一般指用于简化网页设计的框架,使用广泛的前端开发套件,主要特点易于控制,易于延展,易于分配资源。通常前端框架会封装了一些常用的功能,比如html文档操作、各种按钮,表单控件等。合理的运用前端框架可以降低界面开发周期、提升开发效... 性能测试常见指标有哪些 对业务指标的要求主要有:请求响应时间,最大并发量等等。对系统资源的指标,如:资源使用率是指在系统负载运行期间,数据库服务器,应用服务器,web服务器的cpu,内存,硬盘,外置存储,网络带宽的使用率,低于20%的使用率为资源使用稳定,60%-80%的使用率表示资源使用饱和,超过80%的使用率的资... 软件测试培训:边界值分析法 对于软件测试人员来说,测试工作做得越多越会发现,程序的一些错误往往发生在边界处理上,例如,某程序的输入数据要求取值范围为1~100,当取值在1~100内部时没有问题,然而取边界值1或100时会发生错误,这就是程序开发时对边界问题没有做好处理。边界值分析法就是对边界值进行测试的一种方法,本节将针... Web Storage是什么?Web Storage详解 Web Storag是HTML5引入的一个非常重要的功能,可以将数据存储在本地,如保存用户的偏好设置、复选框的选中状态、文本框默认填写的值等。用户在浏览器中刷新网页时,网页通过Web Storage就可以知道用户之前所做的一些修改,而不需要将用户修改的内容存储在服务器端。Web Storage...
×