事件是浏览器对用户操作或系统状态变化的通知，如点击、输入等；添加点击事件应优先使用addEventListener方法而非onclick属性。
事件是浏览器对用户操作或系统状态变化的响应通知，比如点击、输入、页面加载完成等；给元素添加点击事件最常用的是 addEventListener 方法，不是 onclick 属性。
事件本质：不是“动作”而是“通知”
很多人误以为 click 是一个动作，其实它是浏览器在检测到鼠标按下+释放且位置没偏移后，向目标元素发出的一个通知。这个通知本身不执行任何逻辑，只是触发你注册的回调函数。
关键点：
- 事件名是字符串，如
"click"、"input"、"keydown"，注意不带on前缀（onclick是属性名，不是事件名） - 同一个元素可以监听多个
"click"事件，互不影响；但若用element.onclick = fn，会覆盖之前赋的值 - 事件对象（
event）自动传入回调，包含target、currentTarget、preventDefault()等有用属性和方法
添加点击事件：优先用 addEventListener
这是现代标准做法，支持解绑、捕获/冒泡控制、选项配置，比 onclick 属性灵活得多。
const btn = document.querySelector('#myButton');
btn.addEventListener('click', function (e) {
console.log('被点了', e.target);
});
常见注意事项：
- 确保元素已存在 DOM 中——如果脚本在
顶部执行，而按钮在下方，querySelector会返回null；可把脚本放前，或监听DOMContentLoaded - 避免重复绑定：多次调用
addEventListener同一事件+同一函数，会触发多次；若需控制，可用{ once: true }选项 - 箭头函数内无法用
this指向当前元素（因为箭头函数不绑定this），建议用普通函数或直接读e.currentTarget
什么时候该用 onclick 属性？基本不用
onclick 是早期 HTML 属性写法，现在只在极少数场景下被动出现：
- 服务端渲染模板里写内联事件（如
），但不推荐，破坏关注点分离 - 某些老旧库或测试环境模拟简单交互，但生产代码中应避免
- 它只能绑定一个处理函数，无法叠加，也不支持事件选项（如
passive或capture）
如果你看到别人用 element.onclick = fn，多数是初学时的习惯，实际项目中应统一转向 addEventListener。
动态添加的元素怎么监听点击？用事件委托
如果按钮是 JS 动态插入的（比如通过 innerHTML 或 appendChild），直接对它调用 addEventListener 是可行的，但更通用的做法是监听父容器，靠事件冒泡捕获子元素点击：
document.body.addEventListener('click', function (e) {
if (e.target.matches('.dynamic-button')) {
console.log('点中了动态按钮', e.target);
}
});
这样做的好处：
- 无需为每个新按钮单独绑定事件，节省内存和初始化时间
- 父容器只需绑定一次，后续所有匹配
.dynamic-button的元素都自动生效 - 注意用
e.target判断真实点击目标，而不是e.currentTarget（后者是绑定事件的父元素）
事件委托不是“替代方案”，而是处理动态内容的默认思路。别等元素挂载完再一个个绑，从一开始就把监听点设在稳定祖先节点上。
