DOM 事件是可以对 HTML 元素执行的操作。当事件发生时，它会触发 JavaScript 函数。然后，此函数可用于更改 HTML 元素或执行其他操作。
以下是 DOM 事件的一些示例：
- Click - 当用户单击 HTML 元素时，将触发此事件。
- Load - 加载 HTML 元素时发生此事件。
- Change - 当 HTML 元素的值发生更改时，将发生此事件。
- Submit - 提交 HTML 表单时发生此事件。
您可以使用事件处理程序或 addEventListener（） 方法来侦听 DOM 事件并做出反应。addEventListener（） 方法采用两个参数：事件的名称和您希望在事件发生时调用的函数。
DOM 事件也称为文档对象模型事件。它用于与 DOM 元素交互，并在发生任何事件时从 JavaScript 操作 DOM 元素。
让我们看看下面的 DOM 事件示例。
onclick 事件类型
这是最常用的事件类型，当用户单击鼠标的左键时发生。您可以针对此事件类型放置验证、警告等。
例请尝试以下示例。
<html>
<head>
<script>
function sayHello() {
alert("Hello World")
}
</script>
</head>
<body>
<p>Click the following button and see result</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> Enter charater/s by pressing any key </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 | 在 abort 事件上触发 |
| 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 | 在文档脱机时触发 |
| onoine | script | 在文档联机时触发 |
| ononline | script | 在文档联机时触发 |
| onpagehide | script | 当窗口处于隐藏状态时触发 |
| onpageshow | script | 当窗口变为可见时触发 |
| onpause | script | 在媒体数据暂停时触发 |
| onplay | script | 在媒体数据将开始播放时触发 |
| onplaying | script | 在媒体数据开始播放时触发 |
| onpopstate | script | 在窗口的历史记录更改时触发 |
| onprogress | script | 在浏览器获取媒体数据时触发 |
| onratechange | script | 当媒体数据的播放速率发生更改时触发 |
| onreadystatechange | script | 在 ready-state 更改时触发 |
| onredo | script | 在文档执行重做时触发 |
| onresize | script | 在调整窗口大小时触发 |
| onscroll | script | 在滚动元素的滚动条时触发 |
| onseeked | script | 当媒体元素的 seeking 属性不再为 true，并且 seek 已结束时触发 |
| onseeking | script | 当媒体元素的 seeking 属性为 true 且搜索已开始时触发 |
| onselect | script | 在选择元素时触发 |
| onstalled | script | 在获取媒体数据时出错时触发 |
| onstorage | script | 在文档加载时触发 |
| onsubmit | script | 提交表单时触发 |
| onsuspend | script | 当浏览器一直在获取媒体数据，但在获取整个媒体文件之前停止时触发 |
| ontimeupdate | script | 当媒体更改其播放位置时触发 |
| onundo | script | 在文档执行撤消时触发 |
| onunload | script | 在用户离开文档时触发 |
| onvolumechange | script | 当媒体更改音量时触发，当音量设置为 “mute” 时也触发 |
| onwaiting | script | 当媒体已停止播放，但预期会恢复时触发 |
