JavaScript事件是浏览器自动发出的信号，如click；用addEventListener绑定可多次添加且不覆盖，需确保DOM加载完成后再执行，事件对象提供target、clientX/Y等属性，支持事件委托和冒泡控制。
JavaScript 事件不是“要学的概念”，而是你点击按钮时浏览器自动发出的信号——click 就是最典型的一个。处理它不靠“注册流程”，靠的是告诉浏览器：“等这个信号一来，就执行这段代码”。
怎么给按钮绑 click 事件？用 addEventListener 而不是 onclick
直接写 button.onclick = handler 看似简单，但会覆盖之前绑定的同类型事件；而 addEventListener 支持多次绑定、可移除、语义清晰。
-
addEventListener第一个参数是字符串事件名（如"click"），注意加引号 - 第二个参数是函数，可以是具名函数、匿名函数或箭头函数（但箭头函数内
this不指向元素） - 避免在循环里反复赋值
onclick，容易只生效最后一次
const btn = document.querySelector('#my-btn');
btn.addEventListener('click', function() {
console.log('按钮被点了');
});
为什么点不了？常见 DOM 加载时机问题
如果脚本在 <button> 标签前执行，querySelector 拿到的是 null，后续 addEventListener 会报错：Cannot read property 'addEventListener' of null。
- 把
<script>放在 HTML 底部（</body>前）最稳妥 - 或者用
DOMContentLoaded事件包裹初始化逻辑 - 不要依赖
window.onload，它等所有资源（图片、CSS）加载完才触发，太晚
事件对象 event 能干什么？别只用来阻止默认行为
回调函数里第一个参数就是 event 对象，它不只是用来调 event.preventDefault() 的。
立即学习“Java免费学习笔记（深入）”；
-
event.target是真正被点击的元素（可能是按钮里的<span>） -
event.currentTarget才是你绑定事件的那个元素（比如button） -
event.clientX/event.clientY提供鼠标坐标，适合做拖拽或定位 - 想阻止冒泡？用
event.stopPropagation()，但慎用——很多组件依赖冒泡机制
事件委托：一个监听器管一堆按钮
动态添加的按钮、列表项太多、或者按钮还没生成……这时候别一个个去 addEventListener，改用父容器监听 + 判断目标。
- 监听父元素（如
<div id="list">），事件类型仍是"click" - 在回调里用
event.target.matches('button.action')精准识别是否点中目标按钮 - 注意：父容器必须能捕获子元素的冒泡事件，不能设置
pointer-events: none
document.getElementById('list').addEventListener('click', function(event) {
if (event.target.matches('button.delete')) {
const id = event.target.dataset.id;
deleteItem(id);
}
});
真正卡住人的往往不是语法，而是事件没触发时不知道该查 console 还是查 DOM 结构；或是绑了事件却没意识到按钮被 CSS 遮挡、disabled 属性生效、或者父级 overflow: hidden 截断了点击区域。
