DOM 事件学习笔记

DOM（Document Object Model）是 HTML 和 XML 文档的编程接口。在 Web 开发中，常常需要对 DOM 进行操作，而 DOM 事件则是常见的操作之一。

事件类型

常见的 DOM 事件类型包括：

鼠标事件（mouse）
- click：鼠标单击事件
- dblclick：鼠标双击事件
- mousedown：鼠标按下事件
- mouseup：鼠标松开事件
- mouseover：鼠标移入事件
- mouseout：鼠标移出事件
键盘事件（keyboard）
- keydown：键盘按下事件
- keyup：键盘松开事件
- keypress：键盘按键事件
表单事件（form）
- submit：表单提交事件
- reset：表单重置事件
页面事件（page）
- load：页面加载完成事件
- unload：页面卸载事件
其他事件
- focus：元素获取焦点事件
- blur：元素失去焦点事件
- change：表单元素内容改变事件

事件处理

可以使用 JavaScript 来处理 DOM 事件。常见的处理方式包括：

HTML 属性绑定

htmlCopy Code
<button onclick="alert('点击了按钮')">点击我</button>

DOM 对象属性绑定

htmlCopy Code
<script>
  var btn = document.querySelector('button');
  btn.onclick = function() {
    alert('点击了按钮');
  };
</script>

addEventListener 方法绑定

htmlCopy Code
<script>
  var btn = document.querySelector('button');
  btn.addEventListener('click', function() {
    alert('点击了按钮');
  });
</script>

实例

下面是一个简单的实例，当鼠标移入一个元素时，改变该元素的背景颜色：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>DOM 事件示例</title>
  <style>
    /* 默认背景颜色为白色 */
    div {
      width: 200px;
      height: 200px;
      background-color: #fff;
    }
    /* 鼠标移入时背景颜色为红色 */
    div:hover {
      background-color: #f00;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

以上就是 DOM 事件的学习笔记和一个实例。希望对你有所帮助。