事件绑定三件套：从onclick到addEventListener的进化史

原创于 2025-06-10 08:52:44 发布 · 931 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

前端同时被 3 个专栏收录

460 篇文章

订阅专栏

JavaScript

388 篇文章

订阅专栏

面试题

163 篇文章

订阅专栏

大家好，我是江城开朗的豌豆，一名拥有6年以上前端开发经验的工程师。我精通HTML、CSS、JavaScript等基础前端技术，并深入掌握Vue、React、Uniapp、Flutter等主流框架，能够高效解决各类前端开发问题。在我的技术栈中，除了常见的前端开发技术，我还擅长3D开发，熟练使用Three.js进行3D图形绘制，并在虚拟现实与数字孪生技术上积累了丰富的经验，特别是在虚幻引擎开发方面，有着深入的理解和实践。

我一直认为技术的不断探索和实践是进步的源泉，近年来，我深入研究大数据算法的应用与发展，尤其在数据可视化和交互体验方面，取得了显著的成果。我也注重与团队的合作，能够有效地推动项目的进展和优化开发流程。现在，我担任全栈工程师，拥有CSDN博客专家认证及阿里云专家博主称号，希望通过分享我的技术心得与经验，帮助更多人提升自己的技术水平，成为更优秀的开发者。

技术qq交流群：`906392632`

一、石器时代：HTML属性绑定（onclick）

二、青铜时代：DOM属性绑定（element.onclick）

三、工业革命：addEventListener（现代标准）

大家好，我是小杨，一个和事件绑定斗智斗勇6年的前端老兵。今天咱们不聊风花雪月，来聊聊JavaScript中那些让你又爱又恨的事件绑定方法。还记得我刚入行时，因为不懂事件绑定的区别，把整个页面搞得一团糟，按钮点一次触发三次，老板差点让我收拾包袱走人...（开个玩笑）

一、石器时代：HTML属性绑定（onclick）

<button onclick="console.log('我被点了！')">点我</button>

优点：

简单粗暴，适合快速原型开发
新手友好，所见即所得

缺点：

HTML和JS混在一起，维护困难（"面条式代码"警告⚠️）
只能绑定一个处理函数（后面绑定的会覆盖前面的）

我的翻车现场：

<!-- 错误示范：想绑定两个函数？没门！ -->
<button onclick="firstFunc();" onclick="secondFunc();">点我</button>
<!-- 只有secondFunc会执行 -->

二、青铜时代：DOM属性绑定（element.onclick）

document.getElementById('myBtn').onclick = function() {
  console.log('按钮被点击了！');
};

进化点：

实现了结构和行为分离
可以在JS中动态修改

致命缺陷：

依然只能绑定一个处理函数
容易被覆盖（第三方库可能会干掉你的事件）

我的血泪史：

// 引入某个神秘库之后...
document.getElementById('searchBtn').onclick = mySearchHandler;
// 然后发现库里的搜索功能失效了...
// 原来库也绑定了onclick，把我的覆盖了！

三、工业革命：addEventListener（现代标准）

document.querySelector('.btn').addEventListener('click', function(e) {
  console.log('第一次点击');
});

// 可以绑定多个！
document.querySelector('.btn').addEventListener('click', function(e) {
  console.log('第二次点击');
});

王者优势：

支持多个事件处理器（按注册顺序执行）
支持事件捕获和冒泡阶段（第三个参数）
提供更强大的事件对象（event）

高级用法：

// 事件只触发一次
btn.addEventListener('click', myFunction, { once: true });

// 事件捕获（从外向内）
parent.addEventListener('click', handler, true);

// 被动事件（提升滚动性能）
window.addEventListener('scroll', handler, { passive: true });

四、事件代理：偷懒大师的终极奥义

// 不用给每个li都绑事件！
document.getElementById('list').addEventListener('click', function(e) {
  if(e.target.tagName === 'LI') {
    console.log('你点击了第' + e.target.dataset.index + '项');
  }
});

适用场景：

动态列表（新增元素自动"继承"事件）
大量相同元素（性能优化）

我的实战案例：

// 电商项目中的商品列表
productList.addEventListener('click', e => {
  const card = e.target.closest('.product-card');
  if(card) {
    const productId = card.dataset.id;
    addToCart(productId);  // 统一处理点击逻辑
  }
});

五、现代框架中的事件绑定（彩蛋）

虽然原生很重要，但实际开发中我们更多用框架：

React示例：

<button onClick={() => console.log('React方式')}>点我</button>

Vue示例：

<button @click="handleClick">Vue方式</button>

注意： 框架底层仍然使用的是addEventListener，只是帮我们做了封装和优化

六、必须知道的注意事项

内存泄漏：

// 一定要移除不再需要的事件！
const handler = () => console.log('点击');
btn.addEventListener('click', handler);
// 之后记得...
btn.removeEventListener('click', handler);

事件顺序：
- 捕获阶段（外→内）
- 目标阶段
- 冒泡阶段（内→外）

阻止默认行为：

form.addEventListener('submit', e => {
  if(!valid) e.preventDefault(); // 阻止表单提交
});

七、性能优化小技巧

节流防抖：

// 滚动事件优化
window.addEventListener('scroll', _.throttle(handler, 200));

// 搜索框输入优化
searchInput.addEventListener('input', _.debounce(search, 300));

事件委托层级：

// 不要直接在document上委托！
// 尽量选择最近的静态父元素
document.querySelector('.static-container').addEventListener(...);

八、总结

简单场景：可以用onclick属性快速实现
传统项目：推荐使用addEventListener
现代开发：掌握框架提供的事件绑定方式
性能关键：善用事件委托和节流防抖

记住：事件绑定就像谈恋爱，绑定容易解绑难，一定要对处理函数负责到底！如果你们还有什么有趣的事件处理经验，欢迎在评论区分享~