零级事件（如onclick）仅支持单次绑定且会覆盖，结构与行为耦合、无法控制事件阶段；二级事件（addEventListener）支持多次绑定、捕获/冒泡控制、一次性绑定等，是现代推荐方式。
JavaScript中DOM事件处理分为不同级别，零级事件（如onclick）和二级事件（即addEventListener）在使用方式、灵活性和兼容性上有明显区别。核心差异在于：零级事件是直接绑定在HTML元素属性或JS对象属性上，一次只能绑定一个处理函数；而二级事件支持同一事件多次绑定、事件捕获/冒泡控制，且更符合现代开发规范。
零级事件 onclick 的特点与限制
零级事件指通过HTML标签属性（如<button onclick="handle()>）或DOM元素的onclick属性（如btn.onclick = function(){}）绑定事件。它本质是DOM Level 0规范的一部分，简单直接但功能受限。
- 每个元素的
onclick属性只能保存一个函数引用，后赋值会覆盖前一个 - HTML内联写法将结构与行为耦合，不利于维护和复用
- 无法控制事件阶段（捕获 or 冒泡），默认只在冒泡阶段触发
- 函数作用域容易受全局污染，尤其内联写法中
this指向可能不符合预期
二级事件 addEventListener 的优势
addEventListener属于DOM Level 2标准，是目前推荐的事件绑定方式，提供了更强的控制力和可扩展性。
- 同一元素、同一事件类型可多次调用，互不覆盖，适合模块化开发
- 第三个参数可指定是否启用捕获阶段（
true）或仅在冒泡阶段执行（false或省略） - 支持传入
options对象，如{once: true}实现一次性绑定，{passive: true}提升滚动性能 - 可通过
removeEventListener精确解绑，前提是传入的函数引用必须相同（不能用匿名函数）
实际使用中的关键注意事项
虽然addEventListener更强大，但在某些场景下仍需注意兼容性和写法细节。
立即学习“Java免费学习笔记（深入）”；
- IE8及以下不支持
addEventListener，需用attachEvent（已废弃），现代项目通常无需考虑 - 使用箭头函数绑定时，
this不会自动指向当前DOM元素，建议用e.target或e.currentTarget - 动态添加的元素需通过事件委托（委托给静态父容器）来绑定事件，零级事件无法自动生效
- 避免在循环中为多个元素绑定匿名函数，会导致无法解绑；应提前定义函数再传入
简单对比示例
对同一个按钮绑定两次点击逻辑：
// 零级事件 —— 后者覆盖前者
btn.onclick = () => console.log('first');<br>
btn.onclick = () => console.log('second'); // 只输出 second
// 二级事件 —— 两者都会执行
btn.addEventListener('click', () => console.log('first'));<br>
btn.addEventListener('click', () => console.log('second')); 
