JavaScript事件是用户操作或页面状态变化时触发的信号，用于实现交互功能；高频事件包括click、input/change、submit、keydown/keyup、scroll/resize；推荐用addEventListener绑定，可多次绑定且支持防抖；事件对象提供target、preventDefault、stopPropagation等方法。
JavaScript事件是浏览器在用户操作（比如点击、输入、滚动）或页面状态变化（比如加载完成、窗口大小调整）时自动触发的信号。处理这些事件，就是让代码在特定动作发生时执行相应逻辑，从而实现交互功能。
常见的用户交互事件有哪些
日常开发中高频使用的事件包括：
- click：鼠标单击元素（按钮、链接等）
- input 和 change：用于表单输入，input 在内容实时变化时触发，change 在失去焦点且值改变后触发
- submit：表单提交时触发，常用来拦截默认提交行为做校验
- keydown / keyup：键盘按键按下或抬起，适合快捷键、搜索框实时响应
- scroll 和 resize：页面滚动或窗口尺寸变化，注意需防抖避免频繁执行
三种主流事件绑定方式
给元素添加事件响应，主要有以下方法：
-
HTML内联写法（不推荐）：
—— 耦合度高，难以维护 -
DOM元素属性赋值：
btn.onclick = function() { ... };—— 简单但一个元素只能绑定一个该类型事件 -
addEventListener()（推荐）：
btn.addEventListener('click', handler);—— 支持多次绑定、可选捕获/冒泡阶段、便于移除（用removeEventListener）
事件对象与常用操作
事件处理函数默认接收一个 event 对象，它包含关键信息和控制方法：
动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版
下载
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
立即学习“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(); // 不提交
}
});
