DOM 事件

DOM 事件是指当网页中的某个元素发生特定的事件时，会触发相应的事件处理程序。通过 DOM 事件，我们可以实现用户与网页的交互，比如点击按钮、鼠标移动等操作。

事件监听器

在 JavaScript 中，我们可以通过事件监听器来监听 DOM 元素的事件。事件监听器可以通过 addEventListener 方法来添加，语法如下：

element.addEventListener(event, function, useCapture);

• event：表示要监听的事件类型，比如 click、mouseover 等。
• function：表示事件触发时要执行的函数。
• useCapture：可选参数，表示事件是否在捕获阶段执行，默认为 false。

示例代码如下：

document.getElementById('myButton').addEventListener('click', function() {
  alert('Button clicked!');
});

事件对象

当事件发生时，浏览器会创建一个事件对象，该对象包含了与事件相关的信息，比如触发事件的元素、事件类型等。我们可以通过事件处理函数的参数来访问事件对象。

示例代码如下：

document.getElementById('myButton').addEventListener('click', function(event) {
  console.log(event.target); // 输出触发事件的元素
  console.log(event.type); // 输出事件类型
});

事件冒泡和事件捕获

在 DOM 中，事件传播分为冒泡阶段和捕获阶段。事件首先在捕获阶段从根节点向目标节点传播，然后在冒泡阶段从目标节点向根节点传播。

我们可以通过 addEventListener 的第三个参数来控制事件是在捕获阶段还是在冒泡阶段执行。

示例代码如下：

document.getElementById('myDiv').addEventListener('click', function() {
  console.log('Div clicked!');
}, true); // 在捕获阶段执行事件处理程序

常见的 DOM 事件类型

• click：点击事件
• mouseover：鼠标移入事件
• mouseout：鼠标移出事件
• change：表单元素值改变事件
• keydown：键盘按下事件
• load：页面加载完成事件

以上是关于 DOM 事件的基本介绍，希望能帮助你更好地理解和应用 DOM 事件。