在 JavaScript 中，事件对象 event 是浏览器在事件被触发时自动传递给事件处理函数的一个参数，它包含了事件发生时的所有信息，如鼠标位置、键盘按键、事件类型、目标元素等。

🧠 一句话解释：

event 是一个包含了当前事件信息的对象，当你监听一个事件（如 click、keydown）时，JS 会将它作为参数传入事件处理函数。

📦 常见事件对象结构

element.addEventListener("click", function(event) {
  console.log(event);         // 打印整个事件对象
  console.log(event.type);    // click
  console.log(event.target);  // 被点击的元素
});

🎯 1. event 常用属性

属性 / 方法含义
event.type事件类型，如 "click"、"keydown"
event.target事件触发的目标元素（可能是子元素）
event.currentTarget当前绑定事件的元素（通常是你监听的元素）
event.clientX/Y鼠标相对浏览器窗口的 X/Y 坐标
event.pageX/Y鼠标相对文档页面的坐标（包含滚动）
event.key按下的键名（如 "a"、"Enter"）
event.keyCode按键对应的 ASCII 编码（已废弃）
event.preventDefault()阻止默认行为，如链接跳转、表单提交等
event.stopPropagation()阻止事件冒泡到父元素

🧪 2. 示例：点击事件获取坐标

document.addEventListener("click", function(event) {
  console.log("你点击了页面！");
  console.log("位置：", event.clientX, event.clientY);
});

⌨️ 3. 示例：键盘事件

document.addEventListener("keydown", function(event) {
  console.log("你按下了：", event.key);   // 例如 "a", "Enter"
});

🧱 4. 阻止默认行为 + 冒泡

<a href="https://www.google.com" id="link">点我</a>

<script>
  document.getElementById("link").addEventListener("click", function(event) {
    event.preventDefault();      // 阻止跳转
    event.stopPropagation();     // 阻止冒泡
    alert("你点击了链接，但我拦住了它！");
  });
</script>

🚦 5. 常见事件类型与使用场景

事件名说明
click鼠标点击
mousemove鼠标移动
keydown按下键盘
submit表单提交
change表单值变更
input输入框实时输入
contextmenu右键菜单事件

🧠 小知识：事件对象是如何传入的？

在原生 JS 中：

element.addEventListener('click', function(event) {
  // event 是浏览器自动传进来的
});

在 HTML 行内绑定中，需显式传入：

<button onclick="sayHi(event)">点我</button>

<script>
  function sayHi(e) {
    console.log(e.target);  // <button>
  }
</script>

✅ 总结

要点内容
什么是 event包含事件类型、触发对象、鼠标/键盘数据等
如何获取事件监听器函数的第一个参数
用途获取事件详情、阻止默认行为、阻止冒泡、判断按键等