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