JavaScript事件是浏览器在用户操作或页面状态变化时发出的信号，本身不执行逻辑，需通过addEventListener等方法绑定处理函数；推荐事件委托处理动态元素，避免内联onclick。
JavaScript 事件到底是什么？
JavaScript 事件不是“某个功能”，而是浏览器在用户操作或页面状态变化时自动发出的信号。比如用户 click 按钮、页面加载完成、键盘按下、表单提交，都会触发对应事件。这些事件本身不执行任何逻辑，只是“通知”你“发生了什么”——真正干活的是你写的处理函数。
用 addEventListener 绑定点击事件（推荐）
现代标准做法是调用元素的 addEventListener 方法，它支持多次绑定同一事件、可选捕获阶段、能用 removeEventListener 精确解绑。
常见错误：直接赋值 onclick 属性，会导致覆盖之前绑定的处理函数；或者对动态插入的元素漏绑。
- 必须确保目标元素已存在于 DOM 中，否则
getElementById返回null，调用addEventListener会报错Cannot read property 'addEventListener' of null - 如果元素是后续通过 JS 插入的（比如 AJAX 加载），需在插入后立即绑定，或使用事件委托
-
addEventListener第三个参数常用{ once: true }控制只触发一次，避免重复绑定
const btn = document.getElementById('myButton');
if (btn) {
btn.addEventListener('click', function() {
console.log('按钮被点了');
});
}
事件委托：给未来元素或批量元素统一监听
当你有一组动态增删的按钮（比如列表项里的删除按钮），逐个绑定太麻烦，还容易漏。这时把事件监听器挂在父容器上，靠 event.target 判断具体点的是谁，就是事件委托。
立即学习“Java免费学习笔记（深入）”；
关键点：父容器必须存在且稳定；利用 event.target 的层级关系做条件过滤；注意 target 可能是子元素（如按钮里的图标），需要用 closest() 向上查找。
- 不要用
event.srcElement，它是非标准旧属性，应统一用event.target - 避免在委托回调里频繁调用
querySelectorAll，性能差；用closest('.delete-btn')更直接 - 委托不适用于需要精确控制事件流顺序的场景（比如某些自定义 drag 逻辑）
document.getElementById('listContainer').addEventListener('click', function(event) {
if (event.target.classList.contains('delete-btn')) {
const item = event.target.closest('li');
item.remove();
}
});
为什么 onclick 写在 HTML 里不推荐？
像 这种写法虽然能用，但会混杂结构与行为，难以维护，也无法传入动态参数（除非拼字符串，极易出错），更无法使用箭头函数或闭包变量。
另外，内联 handler 的 this 指向是当前元素，看似方便，但一旦涉及模块化或框架集成，作用域和上下文就容易失控。
- 内联事件中的 JavaScript 是在全局作用域执行的，访问不到模块内的
let变量 - 无法使用
event.preventDefault()等原生事件方法（除非显式传event参数） - 调试困难：Chrome DevTools 的 “Event Listeners” 面板看不到内联绑定的监听器
