JavaScript事件处理是通过监听器响应用户操作的机制，常见事件有click、input、change、keydown/keyup、submit、scroll；推荐用addEventListener添加监听器，注意绑定时机和元素存在性，避免内联事件和重复绑定。
JavaScript中的事件处理，是指让网页对用户的操作（比如点击、输入、滚动等）做出响应的机制。核心是通过监听器捕获事件，再执行对应的函数逻辑。
常见的网页事件有哪些
用户与页面交互时会触发多种事件，常用包括：
- click：鼠标单击元素
- input：表单元素内容变化（实时响应，比 change 更灵敏）
- change：表单元素失去焦点且值发生改变时触发
- keydown / keyup：键盘按键按下或抬起
- submit：表单提交（常用于阻止默认提交行为）
- scroll：页面或元素滚动时触发
用 addEventListener 添加监听器
现代标准做法是使用 addEventListener() 方法，它支持为同一个元素添加多个相同类型的监听器，且可灵活控制捕获/冒泡阶段。
基本语法：
立即学习“Java免费学习笔记（深入）”；
element.addEventListener('事件名', 处理函数, 可选配置)例如：
document.getElementById('myBtn').addEventListener('click', function() {
alert('按钮被点了');
});
也可以传入命名函数或箭头函数，便于后续移除：
const handleClick = () => console.log('clicked');btn.addEventListener('click', handleClick);
// 移除时：
btn.removeEventListener('click', handleClick);
注意事件绑定的时机和元素存在性
如果脚本在 HTML 元素加载前就运行，querySelector 或 getElementById 可能返回 null，导致监听器无法绑定。
解决办法有三种：
- 把 <script> 标签放在 HTML 底部（</body> 前）
- 用 DOMContentLoaded 事件确保 DOM 加载完成：
document.addEventListener('DOMContentLoaded', () => { /* 绑定代码 */ }); - 使用事件委托（适合动态添加的元素）：给父容器绑定事件，利用事件冒泡判断目标元素
避免常见陷阱
直接在 HTML 中写 onclick="doSomething()" 虽然可行，但不推荐——它混杂了结构与行为，不利于维护和复用。
另外，不要重复调用 addEventListener 同一函数多次，否则会触发多次；若需切换状态，建议先 removeEventListener 再添加，或用标志位控制逻辑执行。
