DOM 事件是在 HTML 元素上可以执行的动作。当事件发生时，它触发一个 JavaScript 函数，该函数随后可以用来改变 HTML 元素或执行其他操作。
以下是一些 DOM 事件的例子：
-
Click - 当用户点击 HTML 元素时触发此事件。
-
Load - 当 HTML 元素加载时触发此事件。
-
Change - 当 HTML 元素的值改变时触发此事件。
-
Submit - 当 HTML 表单提交时触发此事件。
你可以使用事件处理器或 addEventListener() 方法来监听并响应 DOM 事件。addEventListener() 方法接受两个参数：事件的名称以及希望在事件发生时调用的函数。
DOM 事件也被称为文档对象模型事件。它用于在任何事件发生时与 DOM 元素交互并从 JavaScript 操纵这些元素。
让我们看一些 DOM 事件的例子。
onclick 事件类型
这是最常用的事件类型，在用户点击鼠标左键时发生。你可以在这个事件类型中设置你的验证、警告等。
示例
尝试下面的例子。
<html>
<head>
<script>
function sayHello() {
alert("Hello World")
}
</script>
</head>
<body>
<p>点击下面的按钮看看结果</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</form>
</body>
</html>
ondblclick 事件类型
我们在下面的代码中使用了 ondblclick 事件处理器与元素。当用户双击按钮时，它调用 changeColor() 函数。
在 changeColor() 函数中，我们改变了文本的颜色。因此，当用户双击按钮时，代码将会改变文本的颜色。
示例
<html>
<body>
<h2 id = "text"> Hi Users! </h2>
<button ondblclick="changeColor()"> Double click me! </button>
<script>
function changeColor() {
document.getElementById("text").style.color = "red";
}
</script>
</body>
</html>
onkeydown 事件类型
我们在下面的代码中使用了 keydown 事件与 <input> 元素。每当用户按下任意键时，它将调用 customizeInput() 函数。
在 customizeInput() 函数中，我们将输入框的背景颜色和输入文本颜色改为红色。
示例
<html>
<body>
<p> 按下任意键输入字符 </p>
<input type = "text" onkeydown = "customizeInput()">
<script>
function customizeInput() {
var ele = document.getElementsByTagName("INPUT")[0];
ele.style.backgroundColor = "yellow";
ele.style.color = "red";
}
</script>
</body>
onmouseenter 和 onmouseleave 事件
在下面的代码中，我们使用 onmouseenter 和 onmouseleave 事件处理器为 <div> 元素添加悬停效果。
当鼠标指针进入 <div> 元素时，它调用 changeRed() 函数将文本颜色变为红色；当鼠标指针离开 <div> 元素时，它调用 changeBlack() 函数将文本颜色恢复为黑色。
示例
<html>
<body>
<div id = "text" style = "font-size: 20px;" onmouseenter = "changeRed()" onmouseleave = "changeBlack()"> Hover over the text. </div>
<script>
function changeRed() {
document.getElementById("text").style.color = "red";
}
function changeBlack() {
document.getElementById("text").style.color = "black";
}
</script>
</body>
</html>
HTML 5 标准 DOM 事件
下面列出了标准的 HTML 5 事件供参考。这里的 script 指的是要针对该事件执行的 JavaScript 函数。
事件列表
| 属性 |
值 |
描述 |
| Offline |
script |
在文档离线时触发 |
| Onabort |
script |
在终止事件时触发 |
| onafterprint |
script |
在文档打印之后触发 |
| onbeforeonload |
script |
在文档加载前触发 |
| onbeforeprint |
script |
在文档打印前触发 |
| onblur |
script |
在窗口失去焦点时触发 |
| oncanplay |
script |
在媒体可以开始播放但可能会因缓冲而停止时触发 |
| oncanplaythrough |
script |
在媒体可以播放到结束而不会停止缓冲时触发 |
| onchange |
script |
在元素改变时触发 |
| onclick |
script |
在鼠标点击时触发 |
| oncontextmenu |
script |
在触发上下文菜单时触发 |
| ondblclick |
script |
在鼠标双击时触发 |
| ondrag |
script |
在元素被拖动时触发 |
| ondragend |
script |
在拖动操作结束时触发 |
| ondragenter |
script |
在元素被拖动到有效放置目标上时触发 |
| ondragleave |
script |
在元素正在被拖动经过有效放置目标时触发 |
| ondragover |
script |
在拖动操作开始时触发 |
| ondragstart |
script |
在拖动操作开始时触发 |
| ondrop |
script |
在拖动元素被释放时触发 |
| ondurationchange |
script |
在媒体长度改变时触发 |
| onemptied |
script |
在媒体资源元素突然变得空时触发 |
| onended |
script |
在媒体达到结尾时触发 |
| onerror |
script |
在发生错误时触发 |
| onfocus |
script |
在窗口获得焦点时触发 |
| onformchange |
script |
在表单改变时触发 |
| onforminput |
script |
在表单获得用户输入时触发 |
| onhaschange |
script |
在文档改变时触发 |
| oninput |
script |
在元素获得用户输入时触发 |
| oninvalid |
script |
在元素无效时触发 |
| onkeydown |
script |
在按键被按下时触发 |
| onkeypress |
script |
在按键被按下并释放时触发 |
| onkeyup |
script |
在按键被释放时触发 |
| onload |
script |
在文档加载时触发 |
| onloadeddata |
script |
在媒体数据加载时触发 |
| onloadedmetadata |
script |
在媒体元素的持续时间和其他媒体数据加载时触发 |
| onloadstart |
script |
在浏览器开始加载媒体数据时触发 |
| onmessage |
script |
在消息被触发时触发 |
| onmousedown |
script |
在鼠标按钮被按下时触发 |
| onmousemove |
script |
在鼠标指针移动时触发 |
| onmouseout |
script |
在鼠标指针移出元素时触发 |
| onmouseover |
script |
在鼠标指针移过元素时触发 |
| onmouseup |
script |
在鼠标按钮被释放时触发 |
| onmousewheel |
script |
在鼠标滚轮旋转时触发 |
| onoffline |
script |
在文档离线时触发 |
| ononline |
script |
在文档上线时触发 |
| onpagehide |
script |
在窗口隐藏时触发 |
| onpageshow |
script |
在窗口变得可见时触发 |
| onpause |
script |
在媒体数据暂停时触发 |
| onplay |
script |
在媒体数据即将开始播放时触发 |
| onplaying |
script |
在媒体数据已开始播放时触发 |
| onpopstate |
script |
在窗口的历史变化时触发 |
| onprogress |
script |
在浏览器正在获取媒体数据时触发 |
| onratechange |
script |
在媒体数据的播放速率改变时触发 |
| onreadystatechange |
script |
在准备状态改变时触发 |
| onredo |
script |
在文档执行重做时触发 |
| onresize |
script |
在窗口大小改变时触发 |
| onscroll |
script |
在元素的滚动条正在滚动时触发 |
| onseeked |
script |
在媒体元素的寻求属性不再为真并且寻求结束时触发 |
| onseeking |
script |
在媒体元素的寻求属性为真并且寻求开始时触发 |
| onselect |
script |
在元素被选择时触发 |
| onstalled |
script |
在获取媒体数据时发生错误时触发 |
| onstorage |
script |
在文档加载时触发 |
| onsubmit |
script |
在表单提交时触发 |
| onsuspend |
script |
在浏览器获取媒体数据但在整个媒体文件获取前停止时触发 |
| ontimeupdate |
script |
在媒体改变其播放位置时触发 |
| onundo |
script |
在文档执行撤销时触发 |
| onunload |
script |
在用户离开文档时触发 |
| onvolumechange |
script |
在媒体改变音量包括设为静音时触发 |
| onwaiting |
script |
在媒体停止播放但预计将继续播放时触发 |