前言
JS中的事件是什么？
在JS中，事件其实指的是用户在某个事务中由于某种行为而执行的操作，即对web页面元素的某些操作行为。事件是文档或者浏览器窗口中发生的、特定的交互操作瞬间，它是用户或浏览器自身执行的某种动作，且是JS和DOM间交互的桥梁，比如click、load和mouseover都是事件的名称。事件通常与函数配合来使用，为的是可以通过发生的事件来驱动函数执行。
注意：在JS中，事件名称大小写敏感。如果是事件监听方式，需要在事件名称前面取消on。
事件三要素
事件的三要素指的是事件源头、事件本身、事件驱动。
1、事件源头：是指在哪个元素中引发的事件，比如：div标签、button标签等。
2、事件自身：事件是指交互时候执行的动作，比如：单击、双击、滑动等。
3、事件驱动程序：也叫事件处理程序，即执行之后的结果，比如：单击button标签所执行的点击事件函数。
JS中的事件汇总
在JS中，关于常用的事件，主要有六类：键盘事件、鼠标事件、触摸事件、表单事件、过渡事件、动画事件。
1、键盘事件
键盘事件主要分为三种状态下的触发：松开、按下、不识别功能键。具体如下所示：
使用示例，当键盘被松开时触发，并输出“Hello!”，具体代码如下所示：
window.onkeyup = function() {
console.log('Hello!')
}2、鼠标事件
鼠标事件主要分为十种状态下的触发：左键、右键、双击、经过、离开、获得焦点、失去焦点、移动、弹起、按下。具体如下所示：
使用示例，当鼠标点击左键时候触发，给btn按钮添加点击事件，点击输出Hello!，具体代码如下所示：
let button = document.querySelector('button')
button.onclick = function() {
console.log('Hello!')
}
3. 触摸事件
触摸事件主要分为三种状态下的触发：触摸、滑动、移开。具体如下所示：
使用示例，当触摸事件时候触发，当手指触摸盒子的时候触发，具体代码如下所示：
let title = document.querySelector('div')
title.touchstart = function() {
console.log('touch')
}
4. 表单事件
表单事件主要分为七种状态下的触发：获得焦点、失去焦点、输入、改变、选中、重置、提交。具体如下所示：
使用示例，当表单每次输入的时候触发，将表单中每次输入的内容打印出来，具体代码如下所示：
let input = document.querySelector('input')
input.oninput = function() {
console.log(this.value); //value就是输入的内容
}
5. 过渡事件
过渡事件是在过渡完成的时候触发。具体如下所示：
6. 动画事件
动画事件主要分为三种状态下的触发：结束、重复、播放。具体如下所示：
事件对象
在JS中的事件对象主要有：事件对象、鼠标事件对象、键盘事件对象。
1、事件对象
事件对象主要包括四部分：对象、类型、方法、阻止冒泡。具体如下所示：
使用示例，当点击按钮后打印触发事件的对象，具体代码如下所示：
let button = document.querySelector('button')
button.onclick = function(e) {
console.log(e.target); //触发事件的对象
}
2、鼠标事件对象
鼠标事件对象主要包括六部分：浏览器x坐标、浏览器y坐标、文档x坐标、文档y坐标、屏幕x坐标、屏幕y坐标。具体如下所示：
3、键盘事件对象
键盘事件对象主要指的是返回用户按下的物理按键的值。具体如下所示：
使用示例，当在页面中按下S键之后，输出按下的物理按键的值，具体代码如下所示：
window.addEventListener('keyup', function(e) {
console.log(e.key);
})
最后
通过本文关于前端开发JS中常用事件的详细介绍，不管是在实际的前端开发工作中还是在前端求职面试中都是非常关键的知识点，所以作为前端开发者来说必须要掌握它相关的内容，尤其是从事前端开发不久的开发者来说尤为重要，是一篇值得阅读的文章，重要性就不在赘述。欢迎关注，一起交流，共同进步。