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行代码定义了一个用于单击的按钮。当用户单击按钮时,页面就会弹出一个提示框。​

#JavaScript##Java##后端#
全部评论

相关推荐

用户64975461947315:这不很正常吗,2个月开实习证明,这个薪资也还算合理,深圳Java好多150不包吃不包住呢,而且也提前和你说了没有转正机会,现在贼多牛马公司骗你说毕业转正,你辛辛苦苦干了半年拿到毕业证,后面和你说没hc了😂
点赞 评论 收藏
分享
(黑话警告⚠️:hc=岗位数量,&nbsp;mt=导师,&nbsp;ld=直属领导,&nbsp;cr=代码审查)25年1月,我加入了字节某前端团队,并期望能在这里待到秋招并尝试转正。然而,就在上周,ld&nbsp;找我1v1,告诉我,我的能力和团队预期不太匹配,并和我劝退。晴天霹雳吗?肯定是有的。那一刻,脑子里嗡嗡作响,各种情绪翻涌。但冷静下来想想,这几个月,自己在能掌控的范围内,确实有不少地方做得不尽如人意。所以,我想把这段不算成功的经历复盘一下,希望能给同样在努力转正的你提个醒,避开我踩过的坑。一、ld&nbsp;的要求要注意刚进组时,ld就和我聊过转正的事。我当时发问:“咱们这儿有hc&nbsp;吗?”&nbsp;ld没直接回答,只是说:“看能力,能力到了...
牛客上的彭于晏:过来人告诉你,入职后要做的第一件事儿不是说主动找活儿做,你要先学会融入团队,摸清ld的性格,投其所好。然后才是展示你的能力,能力上可以说技术或者业务,以业务能力为主,技术能力为辅。优先保证自己对业务需求的开发保证质量效率,然后再谈技术的问题,不要你觉得啥啥啥不行就想着整体优化了(发现校招生最喜欢干这事儿),我工作快5年了发现搞这种的最后都没啥好的结果,产出没有还引入新的bug,校招或者实习的水平看到的问题别人看不到嘛?为什么别人不去搞?浪费时间还没收益的事儿不要去做,技术上的能力体现在对于一个新需求,在不符合现在业务发展的架构设计上,你能拿出好的技术方案同时能考虑到后续业务发展逐渐将技术架构引入合理的架构,这是一个漫长的过程而不是一次性的
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客企业服务