JavaScript事件是用户操作或页面状态变化时触发的信号，用于实现交互功能；高频事件包括click、input/change、submit、keydown/keyup、scroll/resize；推荐用addEventListener绑定，可多次绑定且支持防抖；事件对象提供target、preventDefault、stopPropagation等方法。
JavaScript事件是浏览器在用户操作（比如点击、输入、滚动）或页面状态变化（比如加载完成、窗口大小调整）时自动触发的信号。处理这些事件，就是让代码在特定动作发生时执行相应逻辑，从而实现交互功能。
常见的用户交互事件有哪些
日常开发中高频使用的事件包括：
- click：鼠标单击元素（按钮、链接等）
- input 和 change：用于表单输入，input 在内容实时变化时触发，change 在失去焦点且值改变后触发
- submit：表单提交时触发，常用来拦截默认提交行为做校验
- keydown / keyup：键盘按键按下或抬起，适合快捷键、搜索框实时响应
- scroll 和 resize：页面滚动或窗口尺寸变化，注意需防抖避免频繁执行
三种主流事件绑定方式
给元素添加事件响应，主要有以下方法：
word报告自动生成神器
下载
Word报告自动生成神器。自动生成专业Word文档报告，支持模板填充、目录生成、表格/图表插入、页眉页脚、多级标题、样式主题、批量邮件合并。当用户需要生成Word报告、创建合同文档、批量生成通知/证书、填充Word模板、制作商业计划书时触发。
-
HTML内联写法（不推荐）：
<button onclick="alert('clicked')">点我</button>—— 耦合度高，难以维护 -
DOM元素属性赋值：
btn.onclick = function() { ... };—— 简单但一个元素只能绑定一个该类型事件 -
addEventListener()（推荐）：
btn.addEventListener('click', handler);—— 支持多次绑定、可选捕获/冒泡阶段、便于移除（用removeEventListener）
事件对象与常用操作
事件处理函数默认接收一个 event 对象，它包含关键信息和控制方法：
立即学习“Java免费学习笔记（深入）”；
-
event.target指向被点击/触发的实际元素（可能不是绑定事件的父元素） -
event.preventDefault()阻止默认行为（如点击链接跳转、表单提交刷新页面） -
event.stopPropagation()阻止事件向上冒泡，避免父级监听器被意外触发 - 表单中获取输入值建议用
event.target.value，而非直接查 DOM
实际小例子：带校验的登录按钮
用户点击按钮时，检查账号密码是否为空，并阻止表单默认提交：
const form = document.querySelector('#login-form');
form.addEventListener('submit', function(e) {
const user = document.querySelector('#username').value.trim();
const pass = document.querySelector('#password').value.trim();
if (!user || !pass) {
alert('请输入账号和密码');
e.preventDefault(); // 不提交
}
});
