DOM 事件

事件（Event）就是"浏览器里发生了某事"：用户点击、按下键盘、鼠标移动、页面加载完成……JavaScript 监听这些事件并执行对应函数，网页才真正有了交互。事件机制是人机交互的入口，一切点击、输入、提交都靠它驱动。

常见事件一览

事件	触发时机
click	鼠标单击元素
dblclick	双击元素
mouseover / mouseout	鼠标移入 / 移出元素
keydown / keyup	按下 / 松开键盘按键
change	输入框、下拉框内容改变并失焦
submit	提交表单
load	页面或图片等资源加载完成

内联事件（on 属性）

最早的写法是把事件写成 HTML 属性，属性值是一段 JS：

<button onclick="alert('你点了我')">点我</button>

简单直观，但把 JS 与 HTML 混在一起难以维护，而且同一事件只能绑定一个处理函数。

addEventListener：推荐写法

用 addEventListener 在 JS 中注册监听，HTML 保持干净，且同一元素可绑定多个处理函数：

<button id="btn">点我</button>
<script>
  const btn = document.getElementById("btn");
  // 同一 click 事件绑定两个处理函数，点击时都会执行
  btn.addEventListener("click", () => console.log("第一次点击"));
  btn.addEventListener("click", () => console.log("第二次点击"));
</script>

点击按钮，控制台依次输出"第一次点击""第二次点击"。

事件对象 event

处理函数会自动收到一个事件对象，携带本次事件的详细信息：点了哪个元素（target）、事件类型、鼠标坐标、按键等：

<button id="btn">试试</button>
<script>
  document.getElementById("btn").addEventListener("click", function (e) {
    console.log("触发元素：" + e.target.tagName); // 输出：触发元素：BUTTON
    console.log("事件类型：" + e.type);            // 输出：事件类型：click
  });
</script>

两个常用方法：e.preventDefault() 阻止默认行为（如阻止链接跳转、表单提交）；e.stopPropagation() 阻止事件继续向上冒泡。

事件流：捕获与冒泡

点击嵌套元素时，事件先由外向内"捕获"到目标，再从目标向外"冒泡"。默认在冒泡阶段触发处理函数；addEventListener 第三参传 true 可改为捕获阶段：

<div id="outer" style="padding:20px;background:#eee">
  <button id="inner">内层按钮</button>
</div>
<script>
  document.getElementById("outer").addEventListener("click",
    () => console.log("外层被点"), true); // 捕获阶段
  document.getElementById("inner").addEventListener("click",
    () => console.log("内层被点"));
</script>

点击按钮，先输出"外层被点"（捕获阶段外层先收到），再输出"内层被点"。

事件委托

利用冒泡，把多个子元素的事件统一交给父元素处理，这就是事件委托；动态新增的子元素无需重新绑定也能生效：

<ul id="list">
  <li>苹果</li><li>香蕉</li><li>橙子</li>
</ul>
<script>
  document.getElementById("list").addEventListener("click", function (e) {
    if (e.target.tagName === "LI") {
      console.log("你点了：" + e.target.textContent);
    }
  });
</script>

点击"香蕉"，控制台输出：你点了：香蕉。

小结

事件让页面具备交互能力：addEventListener 负责监听，事件对象 e 提供细节，preventDefault/stopPropagation 控制默认行为与传播路径，事件委托提升性能并覆盖动态元素。掌握这四点，事件就能信手拈来。