提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

前端开发面试题—JavaScript事件

JavaScript面试题事件 前端开发
2023-09-11 14:15:12 时间

📚文章目录

什么是JavaScript事件❓

🧩JavaScript事件类别

鼠标事件

键盘事件

框架/对象（Frame/Object）事件

表单事件

动画事件

过渡事件

其他

今天分享一下我遇到的一个面试题，是关于JavaScript事件的问题，简单说一下JavaScript的事件有哪些？因此我们首先要知道什么是JavaScript事件，说到JavaScript事件就离不开操作、获取DOM了，但本章主要还是介绍JavaScript事件的种类。

什么是JavaScript事件❓

  • JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为，是一种“触发-响应”的机制。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。
  • 当我们在某个元素上添加一个事件时，根据事件执行的前后可以把它当成一个事件流，例如在DOM事件中规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后是冒泡阶段，可以在这个阶段对事件做出响应。
  • 其中事件的三要素为事件源、事件类型和事件处理程序（事件处理程序可以通过返回一个适当的值、调用事件对象的某个方法或设置事件对象的某个属性来阻止默认操作的发生。），可以简单理解为“谁触发了事件”“触发了什么事件”“触发事件以后要做什么”。

🧩JavaScript事件类别

❗注意：HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。事件通常与函数结合使用，函数不会在事件发生前被执行！ 

鼠标事件

属性描述
onclick当用户点击某个对象时调用的事件句柄。
oncontextmenu在用户点击鼠标右键打开上下文菜单时触发
ondblclick当用户双击某个对象时调用的事件句柄。
onmousedown鼠标按钮被按下。
onmouseenter当鼠标指针移动到元素上时触发。
onmouseleave当鼠标指针移出元素时触发
onmousemove鼠标被移动。
onmouseover鼠标移到某元素之上。
onmouseout鼠标从某元素移开。
onmouseup鼠标按键被松开。

键盘事件

属性描述
onkeydown某个键盘按键被按下。
onkeypress某个键盘按键被按下并松开。
onkeyup某个键盘按键被松开。

框架/对象（Frame/Object）事件

属性描述
onabort图像的加载被中断。 ( <object>)
onbeforeunload该事件在即将离开页面（刷新或关闭）时触发
onerror在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>)
onhashchange该事件在当前 URL 的锚部分发生修改时触发。
onload一张页面或一幅图像完成加载。
onpageshow该事件在用户访问页面时触发
onpagehide该事件在用户离开当前网页跳转到另外一个页面时触发
onresize窗口或框架被重新调整大小。
onscroll当文档被滚动时发生的事件。
onunload用户退出页面。 ( <body> 和 <frameset>)

表单事件

属性描述
onblur元素失去焦点时触发
onchange该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)
onfocus元素获取焦点时触发
onfocusin元素即将获取焦点时触发
onfocusout元素即将失去焦点时触发
oninput元素获取用户输入时触发
onreset表单重置时触发
onsearch用户向搜索域输入文本时触发 ( <input="search">)
onselect用户选取文本时触发 ( <input> 和 <textarea>)
onsubmit表单提交时触发

动画事件

事件描述
animationend该事件在 CSS 动画结束播放时触发
animationiteration该事件在 CSS 动画重复播放时触发
animationstart该事件在 CSS 动画开始播放时触发

过渡事件

事件描述
transitionend该事件在 CSS 完成过渡后触发。

其他

还有包括（比较陌生的事件）多媒体事件、剪贴板事件、打印事件、拖动事件和一些其他事件

详情请点击下方链接查阅

HTML DOM 事件

相关文章