🎯 DOM 事件：onclick VS addEventListener('click')区别

🎯 DOM 事件：onclick vs addEventListener('click') 区别

特性	.on 事件（如 onclick）	addEventListener('click')
绑定数量	只能绑 1 个（后面覆盖前面）	可以绑 多个（按顺序执行）
移除方式	el.onclick = null	需要 removeEventListener，且必须传同一个函数引用
事件阶段	只能在 冒泡阶段 触发	可以选择 捕获 / 冒泡 阶段（第三个参数）
标准级别	DOM 0 级（老写法）	DOM 2 级（现代标准推荐）

区别详解

绑定数量

onclick：只能绑 1 个，后面覆盖前面

const btn = document.getElementById('btn');

btn.onclick = function() {
  console.log('第一次点击'); // 不会执行！被覆盖了
};

btn.onclick = function() {
  console.log('第二次点击'); // 只有这个会执行
};

addEventListener：多个都执行

const btn = document.getElementById('btn');

function fn1() {
  console.log('第一次点击'); // 会执行
}

function fn2() {
  console.log('第二次点击'); // 也会执行！按顺序来
}

btn.addEventListener('click', fn1);
btn.addEventListener('click', fn2);

移除事件

onclick 移除：直接设为 null

btn.onclick = function() { alert('点击了'); };
// 移除
btn.onclick = null; 

addEventListener 移除：必须传同一个函数

⚠️ 注意 ：如果用匿名函数，是无法移除的！

//✅ 正确写法（用命名函数）
function myClick() {
  console.log('点击了');
}

btn.addEventListener('click', myClick);
// 移除（必须传同一个函数名）
btn.removeEventListener('click', myClick);

//❌ 错误写法（无法移除）
btn.addEventListener('click', function() {
  console.log('匿名函数，删不掉我');
});

// 没用！因为这是两个不同的函数引用
btn.removeEventListener('click', function() {
  console.log('匿名函数，删不掉我');
});

事件阶段

// 第三个参数：
// true → 在捕获阶段触发
// false（默认）→ 在冒泡阶段触发

el.addEventListener('click', fn, true); // 捕获阶段
el.addEventListener('click', fn, false); // 冒泡阶段

简单理解事件流：

假设 HTML 是 body > div > button：

1. 捕获阶段 ：从外到内（body → div → button）
2. 目标阶段 ：到达 button
3. 冒泡阶段 ：从内到外（button → div → body）

onclick 只能在冒泡阶段 触发，而 addEventListener 可以自由选择。

所以我用哪个呢？

1. 90% 的场景：用 addEventListener

   • 更灵活，能绑多个事件
   • 现代标准，功能强大
   • 团队协作推荐
   • 不知道用啥就用它

2. 简单快速测试 / 临时写个小功能：可以用 onclick

   • 代码少，写得快
   • 移除简单（直接 null）

---