事件是浏览器对用户操作或系统状态变化的通知，如点击、输入等；添加点击事件应优先使用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（后者是绑定事件的父元素）

事件委托不是“替代方案”，而是处理动态内容的默认思路。别等元素挂载完再一个个绑，从一开始就把监听点设在稳定祖先节点上。