JavaScript：事件 / DOM事件

snowball_li

于 2024-10-12 21:00:00 发布

阅读量717

点赞数 13

分类专栏：前端文章标签： javascript 前端开发语言事件

本文链接：https://blog.csdn.net/snowball_li/article/details/142869769

版权

前端专栏收录该内容

264 篇文章 27 订阅

订阅专栏

一、JavaScript 事件的定义与原理

JavaScript使我们有能力创建动态页面，网页中的每一个元素都可以产生某些触发JavaScript函数的事件。我们可以认为事件是可以被JavaScript侦测到的一种行为。

当我们在某个元素上添加一个事件时，根据事件执行的前后可以把它当成一个事件流，例如在DOM事件中规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后是冒泡阶段，可以在这个阶段对事件做出响应。

二、HTML DOM 事件

序号	鼠标事件	描述	DOM
1	onclick	当用户点击某个对象时调用的事件句柄。	2
2	oncontextmenu	在用户点击鼠标右键打开上下文菜单时触发。
3	ondblclick	当用户双击某个对象时调用的事件句柄。	2
4	onmousedown	鼠标按钮被按下。	2
5	onmouseenter	当鼠标指针移动到元素上时触发。	2
6	onmouseleave	当鼠标指针移出元素时触发。	2
7	onmousemove	鼠标被移动。	2
8	onmouseover	鼠标移到某元素之上。	2
9	onmouseout	鼠标从某元素移开。	2
10	onmouseup	鼠标按键被松开。	2
序号	键盘事件	描述	DOM
1	onkeydown	某个键盘按键被按下。	2
2	onkeypress	某个键盘按键被按下并松开。	2
3	onkeyup	某个键盘按键被松开。	2
序号	框架/对象（Frame / Object）事件	描述	DOM
1	onabort	图像的加载被中断。 ( <object>)	2
2	onbeforeunload	该事件在即将离开页面（刷新或关闭）时触发	2
3	onerror	在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>)
4	onhashchange	该事件在当前 URL 的锚部分发生修改时触发。
5	onload	一张页面或一幅图像完成加载。	2
6	onpageshow	该事件在用户访问页面时触发
7	onpagehide	该事件在用户离开当前网页跳转到另外一个页面时触发
8	onresize	窗口或框架被重新调整大小。	2
9	onscroll	当文档被滚动时发生的事件。	2
10	onunload	用户退出页面。 ( <body> 和 <frameset>)	2
序号	表单事件	描述	DOM
1	onblur	元素失去焦点时触发	2
2	onchange	该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)	2
3	onfocus	元素获取焦点时触发	2
4	onfocusin	元素即将获取焦点时触发	2
5	onfocusout	元素即将失去焦点时触发	2
6	oninput	元素获取用户输入时触发	3
7	onreset	表单重置时触发	2
8	onsearch	用户向搜索域输入文本时触发 ( <input="search">)
9	onselect	用户选取文本时触发 ( <input> 和 <textarea>)	2
10	onsubmit	表单提交时触发	2
序号	剪贴板事件	描述	DOM
1	oncopy	该事件在用户拷贝元素内容时触发
2	oncut	该事件在用户剪切元素内容时触发
3	onpaste	该事件在用户粘贴元素内容时触发
序号	打印事件	描述	DOM
1	onafterprint	该事件在页面已经开始打印，或者打印窗口已经关闭时触发
2	onbeforeprint	该事件在页面即将开始打印时触发
序号	拖动事件	描述	DOM
1	ondrag	该事件在元素正在拖动时触发
2	ondragend	该事件在用户完成元素的拖动时触发
3	ondragenter	该事件在拖动的元素进入放置目标时触发
4	ondragleave	该事件在拖动元素离开放置目标时触发
5	ondragover	该事件在拖动元素在放置目标上时触发
6	ondragstart	该事件在用户开始拖动元素时触发
7	ondrop	该事件在拖动元素放置在目标区域时触发
序号	多媒体（Media）事件	描述	DOM
1	onabort	事件在视频/音频（audio/video）终止加载时触发。
2	oncanplay	事件在用户可以开始播放视频/音频（audio/video）时触发。
3	oncanplaythrough	事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。
4	ondurationchange	事件在视频/音频（audio/video）的时长发生变化时触发。
5	onemptied	当期播放列表为空时触发
6	onended	事件在视频/音频（audio/video）播放结束时触发。
7	onerror	事件在视频/音频（audio/video）数据加载期间发生错误时触发。
8	onloadeddata	事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。
9	onloadedmetadata	事件在指定视频/音频（audio/video）的元数据加载后触发。
10	onloadstart	事件在浏览器开始寻找指定视频/音频（audio/video）触发。
11	onpause	事件在视频/音频（audio/video）暂停时触发。
12	onplay	事件在视频/音频（audio/video）开始播放时触发。
13	onplaying	事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。
14	onprogress	事件在浏览器下载指定的视频/音频（audio/video）时触发。
15	onratechange	事件在视频/音频（audio/video）的播放速度发送改变时触发。
16	onseeked	事件在用户重新定位视频/音频（audio/video）的播放位置后触发。
17	onseeking	事件在用户开始重新定位视频/音频（audio/video）时触发。
18	onstalled	事件在浏览器获取媒体数据，但媒体数据不可用时触发。
19	onsuspend	事件在浏览器读取媒体数据中止时触发。
20	ontimeupdate	事件在当前的播放位置发生改变时触发。
21	onvolumechange	事件在音量发生改变时触发。
22	onwaiting	事件在视频由于要播放下一帧而需要缓冲时触发。
序号	动画事件	描述	DOM
1	animationend	该事件在 CSS 动画结束播放时触发
2	animationiteration	该事件在 CSS 动画重复播放时触发
3	animationstart	该事件在 CSS 动画开始播放时触发
序号	过渡事件	描述	DOM
1	transitionend	该事件在 CSS 完成过渡后触发。
序号	其他事件	描述	DOM
1	onmessage	该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发
2	onmousewheel	已废弃。使用 onwheel 事件替代
3	ononline	该事件在浏览器开始在线工作时触发。
4	onoffline	该事件在浏览器开始离线工作时触发。
5	onpopstate	该事件在窗口的浏览历史（history 对象）发生改变时触发。
6	onshow	该事件当 <menu> 元素在上下文菜单显示时触发
7	onstorage	该事件在 Web Storage(HTML 5 Web 存储)更新时触发
8	ontoggle	该事件在用户打开或关闭 <details> 元素时触发
9	onwheel	该事件在鼠标滚轮在元素上下滚动时触发
10	visibilitychange	该事件用于检测当前页面的可见性状态是否发生变化。

三、DOM（Document Object Model，文档对象模型）事件分为三个级别

3.1、DOM 0级事件处理

特点	将函数赋值给一个事件处理属性。
示例	通过HTML属性直接定义事件处理函数，如<button id="btn" οnclick="alert('DOM0行内事件')">，或者通过JavaScript为元素的事件处理属性赋值，如document.getElementById("btn").onclick = function() { alert('事件'); }。
缺点	一个处理程序无法同时绑定多个处理函数。

3.2、DOM 2级事件处理

特点	引入了addEventListener()和removeEventListener()方法，允许为同一个事件绑定多个处理函数，并可以设置事件是否在捕获阶段或冒泡阶段执行。
方法	element.addEventListener(event, function, useCapture)：用于添加事件监听器。其中event是事件名称，function是当事件发生时调用的函数，useCapture是一个布尔值，指定事件是否在捕获阶段执行（true）或在冒泡阶段执行（false，默认值）。 element.removeEventListener(event, function, useCapture)：用于移除之前通过addEventListener()添加的事件监听器。
示例	document.getElementById("btn").addEventListener("click", function(){}, false);
兼容性	在IE8及以下版本中，需要使用attachEvent()和detachEvent()方法代替addEventListener()和removeEventListener()，且这两个方法不支持事件捕获阶段。