HTML DOM 事件学习笔记

HTML DOM（文档对象模型）是 HTML 页面编程的标准接口。在 HTML DOM 中，事件是与 HTML 元素相关联的行为，比如页面加载、鼠标单击等，我们可以利用事件来实现各种交互效果。

事件类型

HTML DOM 定义了许多事件类型，例如：

Mouse Events：鼠标事件
- click：鼠标单击事件
- dblclick：鼠标双击事件
- mouseover：鼠标移入事件
- mouseout：鼠标移出事件
Keyboard Events：键盘事件
- keydown：按下键盘事件
- keyup：释放键盘事件
Form Events：表单事件
- submit：提交表单事件
- reset：重置表单事件
Document/Window Events：文档/窗口事件
- load：文档加载事件
- resize：窗口大小调整事件
- scroll：滚动事件

事件处理函数

我们可以使用 JavaScript 来定义事件处理函数，在事件触发时执行相应的操作。例如：

javascriptCopy Code
// 获取按钮元素
const btn = document.getElementById('myButton');

// 在按钮被单击时执行操作
btn.onclick = function() {
  console.log('Button clicked');
};

事件监听器

除了使用事件处理函数，我们还可以使用事件监听器来处理事件。使用事件监听器的好处是可以同时注册多个事件处理程序，而不是覆盖现有的事件处理程序。

javascriptCopy Code
// 获取按钮元素
const btn = document.getElementById('myButton');

// 添加事件监听器
btn.addEventListener('click', function() {
  console.log('Button clicked');
});

// 可以添加多个事件监听器
btn.addEventListener('click', function() {
  alert('Hello world!');
});

实例

下面是一个基于事件监听器的实例，当鼠标移入和移出按钮元素时，改变按钮的颜色：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Event Example</title>
  <style>
    .button {
      background-color: blue;
      color: white;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
    }

    .button:hover {
      background-color: red;
    }
  </style>
</head>
<body>
  <button id="myButton" class="button">Click me!</button>

  <script>
    // 获取按钮元素
    const btn = document.getElementById('myButton');

    // 添加事件监听器
    btn.addEventListener('mouseover', function() {
      btn.style.backgroundColor = 'green';
    });

    btn.addEventListener('mouseout', function() {
      btn.style.backgroundColor = 'blue';
    });
  </script>
</body>
</html>

以上就是 HTML DOM 事件学习笔记的内容及一个实例。