js-DOM事件

1、介绍

事件，也可以说是信号，绑定到js代码。当事件发生时，对应的js代码将被执行。

HTML DOM 事件对象 | 菜鸟教程 (runoob.com)

2、三种声明方式

（1）在html元素中声明

<button onclick="alert(/xss/)">点击弹窗</button>

（2）js调用属性，赋值为匿名函数

document.getElementById('c').onclick=function(){
alert('abc')
}	

（3）js通过事件名称绑定匿名函数

document.getElementById('c').addEventListener('click',function(){
alert('abcd')
})

3、鼠标事件

鼠标事件需要鼠标与声明事件的元素进行交互，进出或在该元素区域内操作。如果是声明元素区域外，则不影响。

• onclick 点击触发
• oncontextmenu 点击鼠标右键打开上下文菜单时触发
• ondblclick 双击触发
• onmousedown 鼠标按下触发
• onmouseenter 鼠标指针移动到元素上时触发
• onmouseleave 鼠标移出元素时触发
• onmousemouve 鼠标移动时触发
• onmouseover 鼠标移到元素上时触发
• onmouseout 鼠标移出元素时触发
• onmouseup 鼠标松开时触发

4、键盘事件

• onkeydown 某键盘按键按下
• onkeypress 某键盘按键被按下并松开
• onkeyup 某键盘按键被松开

5、框架事件

• onabort 图像的加载被中断触发
• onbeforeunload 即将离开页面（刷新或关闭）时触发
• onerror 加载文档或图像错误时触发
• onhashchange 当前url的锚部分发送修改时触发，即#后的部分
• onload 文档或图像加载完成时触发
• onpageshow 用户访问页面时触发
• onpagehide 用户离开当前页面跳转另一个页面时触发
• onresize 窗口或框架重新调整大小时触发
• onscroll 文档被滚动时触发
• onunload 用户退出页面时触发

6、表单事件

• onblur 元素失去焦点时触发
• onchange 表单内容发生改变时触发
• onfocus 元素获取焦点时触发
• onfocusin 元素即将获取焦点时触发
• onfocusout 元素即将失去焦点时触发
• oninput 元素获取用户输入时触发
• onreset 表单重置时触发
• onsearch 向搜索框input type=search输入文本时触发
• onsubmit 表单提交时触发

7、剪切板事件

• oncopy 拷贝元素内容时触发
• oncut 剪切元素内容时触发
• onpaste 在元素中粘贴内容时触发

8、打印事件

• onafterprint 已经开始打印或者打印窗口已经关闭时触发
• onbeforeprint 在页面即将开始打印时触发

9、拖动事件

• ondrag 元素正在被拖动时触发
• ondragend 完成元素拖动时触发
• ondragenter 拖动的元素进行放置目标时触发
• ondragleave 拖动元素离开放置目标时触发
• ondragover 拖动元素在放置目标上时触发
• ondragstart 开始拖动元素时触发
• ondrop 拖动元素放置在目标区域时触发

10、多媒体事件

适用于audio、video标签

• onabort 在视频/音频终止加载时触发
• oncanplay 可以开始播放视频/音频时触发
• oncanplaythrough 视频/音频可以正常播放且无需停顿和缓冲时触发
• ondurationchange 视频/音频的时长发生变化时触发
• onemptied 当前播放列表为空时触发
• onended 视频/音频播放结束时触发
• onerror 视频/音频数据加载期间发生错误时触发
• onloadeddata 浏览器加载音视频当前帧时触发
• onloadedmetadata 在指定音视频的元数据加载后触发
• onloadstart 浏览器开始寻找指定音视频时触发
• onpause 暂停时触发
• onplay 开始播放时触发
• onplaying 音视频暂停或者在缓冲后准备重新开始播放时触发
• onprogress 浏览器下载指定的音视频时触发
• onratechange 播放速度发生变化时触发
• onseeked 用户重新定位音视频的播放位置后触发
• onseeking 用户正则重新定位音视频的播放位置时触发
• onstalled 浏览器获取媒体数据，但媒体数据不可用时触发
• onsuspend 浏览器读取媒体数据中止时触发
• ontimeupdate 当前的播放位置发生改变时触发
• onvolumechange 音量发生改变时触发
• onwaiting 由于要播放下一帧而需要缓冲时触发

11、动画事件

• animationend 在css动画播放结束时触发
• animationiteration 在css动画重复播放时触发
• animationstart 在css动画开始播放时触发

12、过渡事件

• transitionend 在css完成过渡后触发

13、其他事件

• onmessage 通过对象接收到消息时触发，多用于websocket对象
• ononline 浏览器开始在线工作时触发
• onoffline 浏览器开始离线工作时触发
• onpopstate 窗口的浏览历史（history对象）发生改变时触发
• onshow 当menu元素在上下文菜单显示时触发
• onstorage 当web storage更新时触发
• ontoggle 用户打开或关闭details元素时触发
• onwheel 鼠标滚轮在元素上下滚动时触发