js事件大全

今天我们来学习js事件，一起来学习吧~
学习参考：
https://blog.csdn.net/weixin_44388523/article/details/86616710

常用事件类别详见：
https://blog.csdn.net/allen_hdh/article/details/31374379

兼容性详见：
https://www.jb51.net/article/28772.htm

更多事件详见：
https://www.runoob.com/jsref/dom-obj-event.html

一、事件三要素

• 事件对象
• 事件名称
• 事件处理函数

二、常见事件的写法

1. 嵌入式(传统事件绑定)

优点：简单易懂
缺点：将JavaScript代码与html代码混为一起，不利于多人协作开发

//例如：(直接在HTML中写入JS代码)
<button onclick="alert('hello')" onmouseover="show()" id='btn'>点击</button>

2. 脚本模型(现代事件绑定)

在JavaScript中完成事件的绑定
obj.onclick=function(){};

//例如
//找到button元素
var btn = document.getElementById('btn');
//添加点击事件
btn.onclick = function(){
    alert('hello');
};

3. W3C事件

添加事件：addEventListener(事件名,事件函数,false)
删除事件：removeEventListener(事件名,事件函数,false)
注意：事件名 不需要前缀on

//例如
btn.addEventListener('mouseover',function(){
    btn.innerHTML = '点他';
},false);

三、事件类型

Web浏览器中可能发生的事件有很多类型。几种常用的事件类型如下：

• UI事件
• 焦点事件
• 鼠标与滚轮事件
• 键盘与文本事件
• 剪贴板事件
• 打印事件
• 拖动事件
• 动画和过渡事件
• 多媒体事件
• 复合事件
• 变动事件
• HTML5事件
• 设备事件
• 触摸与手势事件

1. UI事件

UI事件中UI即(User Interface,用户界面)，当用户与页面显示的元素交互时触发。
UI事件中主要包括load,unload,abort,error,select,resize,scroll事件。

load：此事件为当页面完全加载完之后（包括所有的图像、js文件、css文件等外部资源），就会触发window上面的load事件。
unload：在文档被完全卸载后触发。用户从一个页面切换到另一个页面就会触发unload事件。利用这个事件最多的情况是清除引用，避免内存泄漏。
move：浏览器的窗口被移动时触发的事件。
resize：当调整浏览器的窗口到一个新的宽度或高度时，就会触发resize事件。这个事件在window（窗口）上面触发。因此同样可以通过JS或者body元素中的onresize特性来指定处理程序。
scroll：这个事件会在文档被滚动期间重复被触发，所以应当尽量保持事件处理程序的代码简单。
error：捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误。
abort：图片在下载时被用户中断。
stop：浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断。

2. 焦点事件

blur：在元素失去焦点时触发。这个事件不冒泡，所有浏览器都支持。
focus：在元素获得焦点时触发。这个事件不冒泡，所有浏览器都支持。
focusin：在元素获得焦点时触发。这个事件冒泡,某些浏览器不支持。
focusout：在元素失去焦点时触发。这个事件冒泡，某些浏览器不支持。
DOMFocusIn：在元素获得焦点时触发。这个事件与HTML事件focus等价，但它冒泡。只有Opra支持这个事件。DOM3级事件废弃了DOMFocusIn，选择了focusin。
DOMFocusOut：在元素失去焦点时触发。这个事件是HTML事件blur的通用版本。只有Opra支持这个事件。DOM3级事件废弃了DOMFocusOut，选择了focusout。

注意：即使blur和focus不冒泡，也可以在捕获阶段侦听到他们。
当焦点从页面中的一个元素移动到另一个元素，会依次触发下列事件：
（1）focusout 在失去焦点的元素上触发
（2）focusin 在获得焦点的元素上触发
（3）blur 在失去焦点的元素上触发
（4）DOMFocusOut 在失去焦点的元素上触发
（5）focus 在获得焦点的元素上触发
（6）DOMFocusIn 在获得焦点的元素上触发

此外，其他表单事件包括：

change：当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可] (<input>, <keygen>, <select>, 和 <textarea>)
input：元素获取用户输入时触发
select：用户选取文本时触发 ( <input> 和 <textarea>)
search：用户向搜索域输入文本时触发 ( <input="search">)
reset：当表单重置时触发的事件
submit：一个表单被递交时触发的事件

3. 鼠标与滚轮事件

click：用户单击鼠标左键或按下回车键触发
dbclick： 用户双击鼠标左键触发。
mousedown：在用户按下了任意鼠标按钮时触发。
mouseenter：当鼠标移入某元素时触发。
mouseleave：当鼠标移出某元素时触发。
mouseover：当鼠标移入某元素时触发，移入和移出其子元素时也会触发。
mouseout：当鼠标移出某元素时触发，移入和移出其子元素时也会触发。
mousemove：鼠标在某元素上移动时触发，即使在其子元素上也会触发。
mouseup：在用户释放鼠标按钮时触发。

补充：以上所有事件除了mouseenter和mouseleave外都冒泡、即子元素连带触发。

4. 键盘和文本事件

keydown：当用户按下键盘上的任意键时触发。按住不放，会重复触发。
keypress：当用户按下键盘上的字符键时触发。按住不放，会重复触发。
keyup：当用户释放键盘上的键时触发。
textInput：这是唯一的文本事件，用意是将文本显示给用户之前更容易拦截文本。　

注意：这几个事件在用户通过文本框输入文本时才最常用到。
补充：当我们在input中输入值时，当键盘按下时，此时value还没有值；当键盘松开时，value才获取到此值。如下(键盘按下一个a)：

<input type="text" id="ipt">
<script type="text/javascript">
    var o = document.querySelector('#ipt');
    o.onkeydow = function(){
        //按下键不会打印该键的值
        console.log('按下' + o.value);  // 按下
    };
    o.onkeyup = function(){
        //松开键才打印该键的值
        console.log('抬起' + o.value);  // 抬起a
    };
</script>    

5. 剪贴板事件

copy：该事件在用户拷贝元素内容时触发
cut：该事件在用户剪切元素内容时触发
paste：该事件在用户粘贴元素内容时触发

6. 打印事件

afterprint：该事件在页面已经开始打印，或者打印窗口已经关闭时触发
beforeprint：该事件在页面即将开始打印时触发

7. 拖动事件

drag：该事件在元素正在拖动时触发
dragend：该事件在用户完成元素的拖动时触发
dragenter：该事件在拖动的元素进入放置目标时触发
dragleave：该事件在拖动元素离开放置目标时触发
dragover：该事件在拖动元素在放置目标上时触发
dragstart：该事件在用户开始拖动元素时触发
drop：该事件在拖动元素放置在目标区域时触发

8. 动画和过渡事件

animationend：该事件在 CSS 动画结束播放时触发
animationiteration：该事件在 CSS 动画重复播放时触发
animationstart：该事件在 CSS 动画开始播放时触发
transitionend：该事件在 CSS 完成过渡后触发。

9. 多媒体事件

abort：事件在视频/音频（audio/video）终止加载时触发。
canplay：事件在用户可以开始播放视频/音频（audio/video）时触发。
canplaythrough：事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。
durationchange：事件在视频/音频（audio/video）的时长发生变化时触发。
emptied：当期播放列表为空时触发
ended：事件在视频/音频（audio/video）播放结束时触发。
error：事件在视频/音频（audio/video）数据加载期间发生错误时触发。
loadeddata：事件在浏览器加载视频/音频（audio/video）当前帧时触发。
loadedmetadata：事件在指定视频/音频（audio/video）的元数据加载后触发。
loadstart：事件在浏览器开始寻找指定视频/音频（audio/video）时触发。
pause：事件在视频/音频（audio/video）暂停时触发。
play：事件在视频/音频（audio/video）开始播放时触发。
playing：事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。
progress：事件在浏览器下载指定的视频/音频（audio/video）时触发。
ratechange：事件在视频/音频（audio/video）的播放速度发送改变时触发。
seeked：事件在用户重新定位视频/音频（audio/video）的播放位置后触发。
seeking：事件在用户开始重新定位视频/音频（audio/video）时触发。
stalled：事件在浏览器获取媒体数据，但媒体数据不可用时触发。
suspend：事件在浏览器读取媒体数据中止时触发。
timeupdate：事件在当前的播放位置发送改变时触发。
volumechange：事件在音量发生改变时触发。
waiting：事件在视频由于要播放下一帧而需要缓冲时触发。

10. 复合事件

复合事件（composition event）是DOM3级事件中新添加的一类事件，用于处理IME的输入序列。IME（Input Method Editor，输入法编辑器）可以让用户输入在物理键盘上找不到的字符。复合事件就是针对检测和处理这种输入而设计的。

compositionstart：在IME的文本复合系统打开时触发，表示要开始输入了。
compositionupdate：在向输入字段中插入新字符时触发。
compositionend：在IME的文本复合系统关闭时触发，表示返回正常键盘的输入状态。

11. 变动事件

DOM2级的变动（mutation）事件能在DOM中的某一部分发生变化时给出提示。变动事件是为XML或HTML DOM设计的，并不特定于某种语言。DOM2级定义了如下变动事件：

DOMSubtreeModified：在DOM结构中发生的任何变化时触发。这个事件在其他任何事件触发后都会触发。
DOMNodeInserted：在一个节点作为子节点被插入到另一个节点中时触发。
DOMNodeRemoved：在节点从其父节点中被移除时触发。
DOMNodeInsertedIntoDocument：在一个节点被直接插入文档或通过子树间接插入到文档之后触发。这个事件在DOMNodeInserted之后触发。
DOMNodeRemovedFromDocument：在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发。这个事件在DOMNodeRemoved之后触发。
DOMAttrModified：在特性被修改之后触发。
DOMCharacterDataModified：在文本节点的值发生变化时触发。
DOMAttributeNameChanged：
DOMElementNameChanged：

12. HTML5事件

contextmenu：在用户点击鼠标右键打开上下文菜单时触发。
beforeUnload：当前页面的内容将要被改变时触发的事件。
DOMContentLoad：HTML Dom结构完成时触发，相当于jquery.ready。
readystatechange：支持readystatechange事件的每个对象都有一个readyState属性

readyState属性可能包含下列5个值中的一个。
（1）uninitialized（未初始化）：对象存在但尚未初始化。
（2）loading（正在加载）：对象正在加载数据。
（3）loaded（加载完毕）：对象加载数据完成。
（4）interactive（交互）：可以操作对象了，但还没有完全加载。
（5）complete（完成）：对象已经加载完毕。
这些状态看起来很直观，但并非所有对象都会经历readyState的这几个阶段。换句话说，如果某个阶段不适用某个对象，则该对象完全可能跳过该阶段；并没有规定哪个阶段适用于哪个对象。

onhashchange：该事件在当前 URL 的锚部分（URL的参数列表及URL中“#”号后面的所有字符串）发生修改时触发。
pageshow：该事件在用户访问页面时触发。
pagehide：该事件在用户离开当前网页跳转到另外一个页面时触发。

13. 设备事件

orientationchange：只要用户改变了设备的查看模式，就会触发orientationchange事件。此时的event对象不包含任何有价值的信息。所有的ios设备都支持orientationchange事件和window.orientation属性。

移动Safari的window.orientation属性中可能包含3个值：
（1）0表示肖像模式
（2）90表示向左旋转的横向模式（“主屏幕”按钮在右侧）
（3）-90表示向右旋转的横向模式（“主屏幕”按钮在左侧）。

MozOrientation：Firefox3.6为检测设备的方向引入了一个名为MozOrientation的新事件。（前缀Moz表示这是特定于浏览器开发商的事件，不是标准事件）当设备的加速计检测到设备方向改变时，就会触发这个事件。
deviceorientation：deviceorientation事件的意图是告诉开发人员设备在空间中朝向哪儿，而不是如何移动。触发deviceorientation事件时，事件对象中包含着每个轴相对于设备静止状态下发生变化的信息。

事件对象包含以下5个属性。
（1）alpha：在围绕z轴旋转时（即左右旋转时），y轴的度数差；是一个介于0到360之间的浮点数。
（2）beta：在围绕x轴旋转时（即前后旋转时），z轴的度数差；是一个介于-180到180之间的浮点数。
（3）gamma：围绕y轴旋转时（即扭转设备时），z轴的度数差；是一个介于-90到90之间的浮点数。
（4）absolute：布尔值，表示设备是否返回一个绝对值。
（5）compassCalibrated：布尔值，表示设备的指南针是否校准过。

devicemotion：devicemotion事件是要告诉开发人员设备什么时候移动，而不仅仅是设备方向如何改变。

触发devicemotion事件时，事件对象包含以下属性。
（1）acceleration：一个包含x、y和z属性的对象，在不考虑重力的情况下，告诉你在每个方向上的加速度。
（2）accelerationIncludingGravity：一个包含x、y和z属性的对象，在考虑z轴自然重力加速度的情况下，告诉你在每个方向上的加速度。
（3）interval：以毫秒表示的时间值，必须在另一个devicemotion事件触发前传入。这个值在每个事件中应该是一个常量。
（4）rotationRate：一个表示方向的alpha、beta和gamma属性的对象。

14. 触摸与手势事件

1.触摸事件

触摸事件会在用户手指放在屏幕上面时、在屏幕上滑动时或从屏幕上移开时触发。具体来说，有以下几个触摸事件。

touchstart：当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
touchmove：当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault()可以阻止滚动。
touchend：当手指从屏幕上移开时触发。
touchcancel：当系统停止跟踪触摸时触发。关于此事件的确切触发时间，文档中没有明确说明。

上面这几个事件都会冒泡，也都可以取消。虽然这些触摸事件没有在DOM规范中定义，但它们却是以兼容DOM的方式实现的。因此，每个触摸事件的event对象都提供了在鼠标事件中常见的属性：bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlkey和metaKey。

除了常见的DOM属性外，触摸事件还包含下列三个用于跟踪触摸的属性。

touches：表示当前跟踪的触摸操作的Touch对象的数组。
targetTouches：特定于事件目标的Touch对象的数组。
changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个Touch对象包含下列属性。
（1）clientX：触摸目标在视口中的x坐标。
（2）cilentY：触摸目标在视口中的y坐标。
（3）identifier：标示触摸的唯一ID。
（4）pageX：触摸目标在页面中的x坐标。
（5）pageY：触摸目标在页面中的y坐标。
（6）screenX：触摸目标在屏幕中的x坐标。
（7）screenY：触摸目标在屏幕中的y坐标。
（8）target：触摸的DOM节点目标。

2.手势事件

iOS2.0中的Safari还引入了一组手势事件。当两个手指触摸屏幕时就会产生手势，手势通常会改变显示项的大小，或者旋转显示项。有三个手势事件，分别介绍如下。

gesturestart：当一个手指以及按在屏幕上而另一个手指又触摸屏幕时触发。
gesturechange：当触摸屏幕的任何一个手指的位置发生变化时触发。
gestureend：当任何一个手指从屏幕上面移开时触发。

只有两个手指都触摸到事件的接收容器时才会触发这些事件。
触摸事件和手势事件之间存在某种关系。当一个手指放在屏幕上时，会触发touchstart事件。如果另一个手指又放在了屏幕上，则会先触发gesturestart事件，随后触发基于该手指的touchstart事件。如果一个或两个手指在屏幕上滑动，将会触发gesturechange事件。但只要有一个手指移开，就会触发gesureend事件，紧接着又会触发基于该手指的touchend事件。

与触摸事件一样，每个手势事件的event对象都包含着标准的鼠标事件属性。此外，还包含两个额外的属性：rotation和scale。其中，rotation属性表示手指变化引起的旋转角度，负值表示逆时针旋转，正值表示顺时针旋转（该值从0开始）。而scale属性表示两个手指间距离的变化情况（例如向内会缩短距离）；这个值从1开始，并随距离拉大而增长，随距离缩短而减小。