JavaScript: JavaScript 事件

最后更新：2026-10-13

事件是用户或浏览器发出的"信号"——用户点了按钮、按了键盘、提交了表单，浏览器加载完页面……这些都是事件。你的代码"监听"这些事件，就能在恰当的时机做出响应。这就像门铃响了你去开门——门铃是事件，开门是响应。

相关 DOM 方法：removeEventListener addEventListener

1. 事件绑定方式

JavaScript 有三种给元素绑定事件处理函数的方式：

<button onclick="alert('别用这种方式')">点我</button>

HTML 和 JS 混在一起，难以维护，不推荐。

(2) DOM 属性

<button id="myBtn">点我</button>
<script>
const btn = document.getElementById('myBtn');
btn.onclick = function() {
  console.log('点击了');
};
</script>

HTML 和 JS 分离了，但一个事件只能绑一个处理函数——后赋值会覆盖前赋值。

(3) addEventListener（推荐）

<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<script>
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
btn1.addEventListener('click', function() {
  console.log('处理函数1');
});
btn1.addEventListener('click', function() {
  console.log('处理函数2');
});
</script>

同一个事件可以绑多个处理函数，还能用 removeEventListener 移除，是最灵活的方式。

2. addEventListener 与 removeEventListener

<script>
element.addEventListener('事件名', 处理函数, 选项);
element.removeEventListener('事件名', 处理函数);
</script>

<button id="btn">测试</button>
<script>
const btn = document.getElementById('btn');

function handler() { console.log('只触发一次'); }
btn.addEventListener('click', handler);
btn.removeEventListener('click', handler);  // 成功移除

btn.addEventListener('click', function() { console.log('匿名'); });
btn.removeEventListener('click', function() { console.log('匿名'); });  // 移除失败！
</script>

3. 常见事件类型

4. 事件对象 event

事件处理函数会收到一个事件对象参数，通常叫 event 或简写 e。

▶ 示例：按钮点击计数

▶ 示例：键盘检测

▶ 示例：表单拦截

▶ 示例：事件委托

5. 事件冒泡与捕获

DOM 事件传播分三个阶段：

1. 捕获阶段：事件从 window 一路向下传到目标元素
2. 目标阶段：事件到达实际触发的元素
3. 冒泡阶段：事件从目标元素一路向上冒泡回 window

默认情况下，addEventListener 在冒泡阶段触发。设第三个参数为 true 则在捕获阶段触发。

     window
       ↓ 捕获
    document
       ↓
      body
       ↓
   目标元素 ← 目标阶段
       ↑ 冒泡
      body
       ↑
    document
       ↑
     window

相关 DOM 方法：removeEventListener addEventListener

❓ 常见问题

📖 小节

• 三种绑定方式中，addEventListener 是唯一推荐的方式，支持多监听器、可移除、可控制传播阶段
• removeEventListener 必须传入同一个函数引用，匿名函数无法移除
• 事件对象 e 的核心属性：target（谁触发的）、type（什么事件）、preventDefault()（阻止默认行为）、stopPropagation()（阻止传播）
• change vs input：前者失焦触发，后者实时触发
• 事件冒泡使得"事件委托"成为可能——监听父元素，用 e.target 处理子元素
• DOMContentLoaded 比 load 更早触发，适合初始化 DOM 操作

📝 作业

1. 基础：创建一个按钮，用 addEventListener 绑定 click 事件，每次点击让按钮的宽度增加 10px。
2. 进阶：实现一个键盘乐器——监听 keydown 事件，按 A/S/D/F/G 分别在页面上显示不同的音符名（Do/Re/Mi/Fa/Sol）。
3. 挑战：用事件委托实现一个动态菜单——有一个 ul 列表和"添加项"按钮，新增的 li 点击后也能高亮显示（不需要给新 li 单独绑事件）。
4. 附加：实现一个 input 事件实时搜索——输入框打字时，下方列表只显示包含输入文字的项。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

关于我们