JavaScript事件使用方法大全（2019）

最新推荐文章于 2023-12-28 16:28:26 发布

happy任

最新推荐文章于 2023-12-28 16:28:26 发布

阅读量592

点赞数 4

分类专栏：经验总结文章标签： js事件 dom事件 h5事件 javascript事件前端事件

本文链接：https://blog.csdn.net/qq_24182885/article/details/87091886

版权

17 篇文章 0 订阅

订阅专栏

一、前言

基于事件的异步回调机制是JS这门语言的一大特色，只有打牢基础，我们才能写出优秀的框架，一下为自己整理的较为详细的事件说明，此文会不定期更新。目前还差媒体相关的事件未做总结，后续验证事件的使用方式后，再更新！

事件	描述
onabort	图片的加载被中断
onbeforeunload	即将离开页面（刷新或关闭）时触发
onerror	在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>)
onhashchange	在当前 URL 的锚点部分发生改变时触发（简单路由的实现原理）
onload	页面或图像完成加载时触发执行顺序onload>onpageshow
onpageshow	该事件在用户访问页面时触发执行顺序onload>onpageshow
onpagehide	该事件在用户离开当前网页跳转到另外一个页面时触发
onresize	窗口或框架被重新调整大小(常用于响应式页面实现)
onscroll	某个元素内部出现滚动条，并滚动时发生的事件（window则为浏览器滚动时，触发）
onunload	用户退出页面时触发

事件	描述
onblur	元素失去焦点时
onchange	表单元素value发生变化并失去焦点后，触发
onfocus	元素获取焦点时
onfocusin	元素即将获取焦点时
onfocusout	元素即将失去焦点时触发
oninput	元素获取用户输入时触发(每次输入都会触发)
onreset	表单重置时触发（针对form元素）
onsearch	input中输入信息后，按下 "回车" 键后触发（type必须为search）
onselect	用户选取文本时触发 ( input和textarea都可以触发)
onsubmit	表单提交时触发（针对form元素）

事件	描述
oncopy	该事件在用户拷贝元素内容时触发（ctrl+c 或鼠标右键copy均可触发）--常用于input/textarea
oncut	该事件在用户剪切元素内容时触发--常用于input/textarea
onpaste	该事件在用户粘贴元素内容时触发--常用于input/textarea

事件

描述

onafterprint

该事件在打印窗口关闭时触发

（使用打印对话框关闭时，可触发，一般将事件绑定在body上）

onbeforeprint

该事件在页面即将开始打印时触发（在打开打印窗口前触发，一般将事件绑定在body上）

事件	描述
ondrag	元素正在被拖动时持续触发
ondragstart	开始拖动元素时触发
ondragend	完成元素拖动后触发
ondragenter	当有被拖动的对象进入绑定此事件的元素范围内时触发此事件
ondragover	当有被拖动的对象在绑定此事件的元素范围内拖动时持续触发此事件
ondragleave	当被拖动的对象离开绑定此事件的元素范围内时触发此事件;
ondrop	在一个拖动过程中，释放鼠标键时触发此事件; 要被释放到的目标容器的ondragover默认事件必须被禁用，这点至关重要!

事件	描述
animationend	CSS @keyframes动画结束播放时触发,一般用document进行监听
animationiteration	CSS @keyframes动画重复播放时触发,一般用document进行监听
animationstart	CSS @keyframes动画开始播放时触发,一般用document进行监听
transitionend	CSS transition完成过渡后触发,一般用document进行监听

事件	描述
onmessage	WebSocket、Web Worker、Event Source、postMessage、子 frame或父窗口等接收到消息时触发
onpopstate	该事件在窗口的浏览历史（history 对象）发生改变时触发,VueRouter的history实现原理
onstorage	该事件在 Web Storage(HTML 5 Web 存储)更新时触发（大部分浏览器不支持！）
onwheel	鼠标滚轮在元素内部上下滚动时触发（有没有滚动条均触发）

关注