JavaScript HTML DOM 事件
HTML DOM 允许 JavaScript 对 HTML 事件做出反应
对事件做出反应
当事件发生时，例如当用户点击 HTML 元素时，可以执行 JavaScript 代码。
要在用户点击元素时执行代码，请将 JavaScript 代码添加到 HTML 事件属性中
onclick=JavaScript
HTML 事件示例
- 当用户点击鼠标时
- 当网页加载时
- 当图像加载时
- 当鼠标悬停在元素上时
- 当输入字段更改时
- 当 HTML 表单提交时
- 当用户敲击按键时
在本例中，当用户点击时，<h1> 元素的内容将更改
示例
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">点击此文本！</h1>
</body>
</html>
试一试 »
在本例中，从事件处理程序中调用了一个函数
示例
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">点击此文本！</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
试一试 »
HTML 事件属性
要将事件分配给 HTML 元素，可以使用事件属性。
在上面的示例中，名为 displayDate 的函数将在点击按钮时执行。
使用 HTML DOM 分配事件
HTML DOM 允许你使用 JavaScript 将事件分配给 HTML 元素
示例
将 onclick 事件分配给按钮元素
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
试一试 »
在上例中，一个名为 displayDate 的函数被分配给具有 id="myBtn" 的 HTML 元素。
当按钮被点击时，该函数将被执行。
onload 和 onunload 事件
当用户进入或离开页面时，将触发 onload 和 onunload 事件。
可以使用 onload 事件检查访问者的浏览器类型和浏览器版本，并根据信息加载网页的正确版本。
可以使用 onload 和 onunload 事件处理 cookie。
oninput 事件
当用户输入数据时，oninput 事件常用于某些操作。
以下是如何使用 oninput 更改输入字段内容的示例。
onchange 事件
onchange 事件通常与输入字段的验证结合使用。
以下是如何使用 onchange 的示例。当用户更改输入字段的内容时，将调用 upperCase() 函数。
onmouseover 和 onmouseout 事件
当用户将鼠标悬停在 HTML 元素上或移出 HTML 元素时，可以使用 onmouseover 和 onmouseout 事件触发函数。
onmousedown、onmouseup 和 onclick 事件
onmousedown、onmouseup 和 onclick 事件都是鼠标点击的一部分。首先，当鼠标按钮被点击时，将触发 onmousedown 事件；然后，当鼠标按钮被释放时，将触发 onmouseup 事件；最后，当鼠标点击完成时，将触发 onclick 事件。
更多示例
onmousedown 和 onmouseup
当用户按住鼠标按钮时，更改图像。
onload
页面加载完成后，显示一个警告框。
onfocus
当输入字段获得焦点时，更改其背景颜色。
鼠标事件
当光标移动到元素上时，更改元素的颜色。
HTML DOM 事件对象参考
要查看所有 HTML DOM 事件的列表，请查看我们完整的 HTML DOM 事件对象参考。
