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 鼠标滚轮在元素上下滚动时触发