首页 › JavaScript › DOM 与事件 › 事件模型与事件委托

事件流

// addEventListener 第三个参数控制事件阶段
element.addEventListener('click', handler, false);   // 冒泡阶段（默认）
element.addEventListener('click', handler, true);    // 捕获阶段

事件绑定

// 方式一：addEventListener（推荐）
const btn = document.querySelector('button');
btn.addEventListener('click', function(event) {
  console.log('点击了', event.target);
});

// 移除监听（需保持函数引用）
function handler(e) { console.log(e); }
element.addEventListener('click', handler);
element.removeEventListener('click', handler);

// 方式二：onclick（只能绑定一个）
btn.onclick = function(e) { };
btn.onclick = function(e) { };  // 覆盖上一个

event 对象

element.addEventListener('click', (event) => {
  event.type;              // "click"
  event.target;            // 实际触发的元素
  event.currentTarget;     // 绑定的元素
  event.preventDefault();  // 阻止默认行为（如链接跳转）
  event.stopPropagation(); // 阻止冒泡
  event.stopImmediatePropagation(); // 阻止冒泡 + 同一元素的其他监听
});

事件委托

利用冒泡机制，在父元素上统一处理子元素事件：

// ❌ 逐个绑定（性能差）
document.querySelectorAll('li').forEach(li => {
  li.addEventListener('click', () => { });
});

// ✅ 事件委托（父元素统一处理）
document.querySelector('ul').addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log('列表项点击', event.target.textContent);
  }
});

// 使用 matches 精细判断
document.querySelector('.list').addEventListener('click', (event) => {
  const item = event.target.closest('.list-item');
  if (item) {
    console.log(item.dataset.id);
  }
});

常见事件

// 鼠标
element.addEventListener('click', fn);       // 点击
element.addEventListener('dblclick', fn);     // 双击
element.addEventListener('mouseenter', fn);   // 进入
element.addEventListener('mouseleave', fn);   // 离开
element.addEventListener('mousemove', fn);    // 移动

// 键盘
document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') { /* 回车 */ }
  if (e.ctrlKey && e.key === 's') { e.preventDefault(); }
});

// 表单
form.addEventListener('submit', (e) => { e.preventDefault(); });
input.addEventListener('input', fn);   // 每次输入
input.addEventListener('change', fn);  // 失去焦点且值变化
input.addEventListener('focus', fn);   // 聚焦
input.addEventListener('blur', fn);    // 失焦

// 窗口/滚动
window.addEventListener('resize', fn);
window.addEventListener('scroll', fn);
window.addEventListener('load', fn);     // 页面加载完成
document.addEventListener('DOMContentLoaded', fn); // DOM 就绪

小结

概念	要点
事件流	捕获 → 目标 → 冒泡
addEventListener	第三个参数控制捕获/冒泡
事件委托	利用冒泡，父元素统一处理
event 对象	target / currentTarget / preventDefault() / stopPropagation()

上一节：DOM 操作 下一节：BOM 与表单处理

贡献者: 布欧-Lewyon