HTML 事件学习笔记

什么是HTML事件？

在HTML中，事件是指文档中发生的某些特定动作或交互行为，可以被JavaScript代码所感知和处理。

HTML事件包括用户交互事件（如鼠标点击、键盘输入、滚轮滑动等）和页面加载事件（如页面加载完成、页面卸载等）等。

HTML事件类型

HTML中支持很多种事件类型，下面列举了一些常用的事件类型以及它们的描述：

onclick：当用户点击元素时触发；
onload：当页面或图像加载完成后触发；
onunload：当用户离开页面时触发；
onmouseover：当鼠标移动到元素上方时触发；
onmouseout：当鼠标从元素上方移开时触发；
onkeydown：当用户按下键盘上任意键时触发；
onkeyup：当用户释放键盘上的键时触发；
onsubmit：当用户提交表单时触发；
onreset：当用户重置表单时触发。

HTML事件处理程序

要将一个事件与其相应的JavaScript代码绑定，就需要使用事件处理程序。HTML事件处理程序有两种绑定方式：

属性绑定：通过在HTML标签中添加事件属性，将事件与JavaScript函数直接关联起来，如下所示：

htmlCopy Code
<button onclick="alert('Hello World!')">点击我</button>

DOM绑定：通过获取HTML元素的引用并向其添加事件监听器，将事件与JavaScript函数关联起来，如下所示：

htmlCopy Code
<button id="myButton">点击我</button>
<script>
  document.getElementById("myButton").addEventListener("click", function() {
    alert("Hello World!");
  });
</script>

HTML事件实例

下面是一个用JavaScript编写的简单的HTML事件实例，它会在用户点击按钮时更新页面上的文本内容：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
  <title>HTML事件实例</title>
</head>
<body>
  <h1 id="header">这是一个标题</h1>
  <button id="myButton">点击我</button>

  <script>
    var header = document.getElementById("header");
    var button = document.getElementById("myButton");

    button.addEventListener("click", function() {
      header.innerHTML = "文本已更新";
    });
  </script>
</body>
</html>

以上是一个简单的事件处理实例，当用户点击按钮时，页面上的标题文本将被更新为“文本已更新”。