DOM 事件的深入浅出（一）

以下是详细讲解“DOM 事件的深入浅出（一）”的完整攻略。

什么是 DOM 事件

DOM 事件指的是由 HTML 页面中的元素触发的事件。例如，当用户在网页上点击一个按钮时，会触发相应的事件处理程序。

DOM 事件的分类

DOM 事件按照产生的顺序可以分为三种类型：

1. 冒泡型事件（Bubbling events）：从目标元素开始向外冒泡，直到传递到文档根节点。
2. 捕获型事件（Capturing events）：从文档根节点开始向内捕获，直到传递到目标元素。
3. 不冒泡也不捕获的事件（Non-bubble, non-capture events）：比较少见。

DOM 事件的监听

在处理 DOM 事件时，我们通常会使用监听器（listener）。监听器是一个 JavaScript 函数，它会在事件被触发时执行。使用 addEventListener() 方法来为元素添加监听器：

element.addEventListener("click", function(){
  // 处理代码
});

DOM 事件的示例

以下是两个简单的 DOM 事件示例：

示例一：点击按钮弹出提示框

HTML 代码：

<button id="myBtn">点击我</button>

JavaScript 代码：

// 获取按钮元素
var btn = document.getElementById("myBtn");

// 监听按钮的 click 事件
btn.addEventListener("click", function(){
  // 弹出提示框
  alert("你点击了按钮！");
});

示例二：鼠标悬停时改变文本颜色

HTML 代码：

<p id="myPara">这是一段文本。</p>

JavaScript 代码：

// 获取文本元素
var para = document.getElementById("myPara");

// 监听文本的 mouseover 和 mouseout 事件
para.addEventListener("mouseover", function(){
  // 改变文本颜色为红色
  this.style.color = "red";
});

para.addEventListener("mouseout", function(){
  // 改变文本颜色为黑色
  this.style.color = "black";
});

以上就是对“DOM 事件的深入浅出（一）”讲解的完整攻略。