JavaScript事件是浏览器对用户操作或系统状态变化的通知机制，本身不执行逻辑，只触发绑定的函数；常用绑定方式为addEventListener，需注意避免立即执行函数、区分event.target与currentTarget，并排查DOM未加载等常见问题。
JavaScript 事件到底是什么
JavaScript 事件不是“某个东西发生了”，而是浏览器对用户操作或系统状态变化的**通知机制**。比如用户点按钮、页面加载完成、键盘按下、网络请求返回，这些都会触发对应事件。它本身不执行逻辑，只负责“喊一声”——真正干活的是你绑定的函数。
给按钮绑点击事件的三种常用方式
别用 onclick HTML 属性写死逻辑，维护性差、无法动态控制。优先选以下方式：
-
element.addEventListener('click', handler)：推荐，支持多次绑定、可移除、语义清晰 -
element.onclick = handler：简单但会覆盖之前赋值，仅适合单次快速调试 - 用
document.querySelector或getElementById先拿到按钮元素，再绑定——不能对未挂载的 DOM 调用addEventListener
常见错误：document.getElementById('btn').addEventListener('click', myFn()) —— 这里多写了括号，导致函数立即执行，而不是点击时执行。正确写法是 myFn（不带括号）。
点击事件对象里有哪些关键信息
回调函数接收一个 event 参数，它不只是“告诉你是谁被点了”，还包含大量实用字段：
立即学习“Java免费学习笔记（深入）”；
-
event.target：实际被点击的元素（可能是按钮里的<span>，不是按钮本身） -
event.currentTarget：绑定事件的那个元素（即你调用addEventListener的那个） -
event.preventDefault()：阻止默认行为，比如点击<a href="#">时不跳转 -
event.stopPropagation()：阻止事件冒泡，避免父级监听器也被触发
示例中常忽略 target 和 currentTarget 区别，结果在按钮含子元素时逻辑出错。
const btn = document.getElementById('submit-btn');
btn.addEventListener('click', function(event) {
console.log('target:', event.target); // 可能是内部的 i 标签
console.log('currentTarget:', event.currentTarget); // 一定是 #submit-btn
event.preventDefault(); // 如果按钮在 form 里，这行能防止页面刷新
});
为什么点击没反应？检查这几个点
90% 的“点不动”问题不是语法错，而是环境或时机问题：
- 脚本执行时 DOM 还没加载完 → 把 JS 放在
</body>前，或用DOMContentLoaded事件包裹 - 按钮 ID 写错或重复 → 检查
document.getElementById返回是否为null - CSS 设置了
pointer-events: none或opacity: 0→ 元素不可点击但 DOM 存在 - 事件被父级
stopPropagation拦截了 → 用浏览器开发者工具的 Event Listeners 面板查看绑定情况
最隐蔽的是异步渲染场景：React/Vue 中按钮由状态生成，但事件绑定写在初始 JS 里，DOM 还没出来就去绑——得等组件挂载后再绑定，或用事件委托。
