HTML DOM - 事件-优快云博客

本文介绍了如何使用HTML事件属性和JavaScript来响应用户的交互行为，包括点击、加载等，并提供了实际的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实例

Mouse Over Me

Click Me

对事件作出反应

当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。

如需在用户点击某个元素时执行代码，请把 JavaScript 代码添加到 HTML 事件属性中：

onclick=JavaScript

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时

在本例中，当用户点击时，会改变 <h1> 元素的内容：

实例

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='hello!'">请点击这段文本!</h1>
</body>
</html>

亲自试一试

在本例中，会从事件处理程序中调用函数：

实例

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="hello!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击这段文本!</h1>
</body>
</html>

亲自试一试

HTML 事件属性

如需向 HTML 元素分配事件，您可以使用事件属性。

实例

向 button 元素分配一个 onclick 事件：

<button onclick="displayDate()">试一试</button>

亲自试一试

在上面的例子中，当点击按钮时，会执行名为 displayDate 的函数。

使用 HTML DOM 来分配事件

HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件：