今天分享一下我遇到的一个面试题,是关于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>) |
表单事件
动画事件
事件 | 描述 |
animationend | 该事件在 CSS 动画结束播放时触发 |
animationiteration | 该事件在 CSS 动画重复播放时触发 |
animationstart | 该事件在 CSS 动画开始播放时触发 |
过渡事件
事件 | 描述 |
transitionend | 该事件在 CSS 完成过渡后触发。 |
其他
还有包括(比较陌生的事件)多媒体事件、剪贴板事件、打印事件、拖动事件和一些其他事件
详情请点击下方链接查阅