JavaScript事件是用户或浏览器执行的动作，常见类型有click、input、change、keydown/keyup、submit、load、DOMContentLoaded；添加方式包括内联属性、DOM属性赋值和addEventListener（推荐），需注意元素存在时机、事件委托、this指向及内存泄漏。
JavaScript 事件是用户或浏览器自身执行的特定动作（比如点击、输入、页面加载），触发后可运行一段代码来响应。为元素添加事件，核心就是把函数“绑定”到某个元素的某个事件上。
常见的事件类型有哪些？
日常开发中高频使用的事件包括：
- click：鼠标单击元素
- input：表单元素内容变化（实时响应，比 change 更灵敏）
- change：表单元素失去焦点且值已改变（如 select 选中、input 失去焦点）
- keydown / keyup：键盘按键按下或抬起
- submit：表单提交（常用于阻止默认提交行为）
- load：页面或图片等资源加载完成
- DOMContentLoaded：HTML 文档解析完成（不等样式、图片）
三种主流添加事件的方式
方式不同，适用场景和细节有差异，选对很重要：
-
HTML 内联事件属性（简单但不推荐）：
缺点：逻辑与结构混在一起，不易维护，无法复用函数，也不支持事件对象精细控制。 -
DOM 元素属性赋值（仅支持单个事件）：
const btn = document.querySelector('button');
btn.onclick = function() { console.log('被点了'); };
注意：重复赋值会覆盖前一个，不能同时绑定多个 click 响应函数。 -
addEventListener() 方法（推荐标准做法）：
btn.addEventListener('click', function(e) {
console.log('事件对象:', e);
e.preventDefault(); // 阻止默认行为
});
优势：可多次调用绑定多个同类型事件；支持第三个参数控制捕获/冒泡阶段；可精确移除（用 removeEventListener 配合相同函数引用）。
绑定事件时要注意的关键点
实际写代码时容易踩坑的地方：
立即学习“Java免费学习笔记（深入）”；
- 确保元素已存在再绑定——如果脚本在 HTML 之前执行，需监听 DOMContentLoaded 或把 script 放在 body 底部
- 给动态生成的元素（如 AJAX 加载后插入的按钮）加事件，优先用事件委托**：监听父容器，通过 e.target 判断真正点击的是谁
- 函数内用 this 指向当前触发事件的元素（箭头函数里 this 不指向元素，慎用）
- 需要清理时（如单页应用切换页面），记得调用 removeEventListener，避免内存泄漏
基本上就这些。事件不是一次性配置完就不管了，理解触发时机、作用域和生命周期，才能写出稳定又灵活的交互逻辑。
