JavaScript 事件

在 web 开发中，事件是用户与页面交互的重要部分。JavaScript 事件处理程序可以用来响应用户的操作，比如点击、滚动、键盘输入等。在本章节中，我们将深入了解 JavaScript 事件的相关知识。

事件类型

JavaScript 中有很多种事件类型，比如鼠标事件、键盘事件、表单事件等。常见的事件类型包括：

• 鼠标事件：click（点击）、mouseover（鼠标悬停）、mouseout（鼠标移出）等。
• 键盘事件：keydown（按下键盘按键）、keyup（释放键盘按键）等。
• 表单事件：submit（提交表单）、change（表单元素值改变）等。

事件监听

事件监听是 JavaScript 中处理事件的一种常见方式。通过addEventListener()方法可以为指定元素添加事件监听器，当事件触发时执行相应的处理函数。

示例代码：

document.getElementById('btn').addEventListener('click', function() {
  alert('按钮被点击了！');
});

事件对象

在事件处理函数中，可以通过事件对象来获取触发事件的相关信息，比如事件类型、触发元素、鼠标位置等。

示例代码：

document.getElementById('btn').addEventListener('click', function(event) {
  console.log(event.type); // 输出事件类型
  console.log(event.target); // 输出触发事件的元素
  console.log(event.clientX, event.clientY); // 输出鼠标位置
});

事件冒泡与事件捕获

事件冒泡是指事件从最具体的元素开始向最不具体的元素传播，而事件捕获则是相反的过程。可以通过addEventListener()方法的第三个参数来指定事件捕获或事件冒泡。

示例代码：

document.getElementById('parent').addEventListener('click', function() {
  console.log('父元素被点击了！');
}, true); // 使用事件捕获

document.getElementById('child').addEventListener('click', function() {
  console.log('子元素被点击了！');
}, false); // 使用事件冒泡

阻止事件默认行为

有些事件会触发默认行为，比如点击链接会跳转页面、提交表单会刷新页面等。可以通过事件对象的preventDefault()方法来阻止默认行为。

示例代码：

document.getElementById('link').addEventListener('click', function(event) {
  event.preventDefault(); // 阻止链接跳转
  alert('链接被点击了！');
});

以上就是关于 JavaScript 事件的一些基础知识，希望能帮助你更好地理解和运用事件处理。