JavaScript事件是用户或浏览器操作触发的信号，通过addEventListener为DOM元素添加监听器以响应click、input、keydown等事件，支持多监听、捕获/冒泡控制及事件委托。
JavaScript事件是用户或浏览器在网页中执行某些操作时触发的信号，比如点击按钮、鼠标移动、页面加载完成、键盘按键等。为DOM元素添加事件监听，就是告诉JavaScript“当某个事件发生时，请执行我指定的代码”。
常见的JavaScript事件类型
不同操作会触发不同事件，常用的基本有：
- click：鼠标单击元素
-
input 或 change：表单内容发生变化（
input实时触发，change在失去焦点时触发） - keydown / keyup：键盘按键按下或抬起
- submit：表单提交
- load：页面或图片等资源加载完成
-
DOMContentLoaded：HTML文档解析完成，DOM可操作（比
load更早）
用addEventListener添加事件监听器
这是现代标准推荐的方式，支持为同一元素添加多个相同类型的监听器，且可灵活控制捕获/冒泡阶段。
基本语法：
立即学习“Java免费学习笔记（深入）”；
element.addEventListener(事件名, 处理函数, 可选配置)
例如：
const btn = document.querySelector('#myButton');
btn.addEventListener('click', function() {
alert('按钮被点了');
});
也可以传入命名函数或箭头函数；第三个参数可以是布尔值（true启用捕获，false或省略为冒泡），也常传入对象如{ once: true }（只执行一次）、{ passive: true }（优化滚动性能）等。
其他添加方式（不推荐用于新项目）
内联事件处理（HTML中写）：
缺点：HTML与JS混杂，不易维护，无法绑定多个同类型事件。
DOM0级事件处理（直接赋值）：btn.onclick = function() { ... };
缺点：一个元素同一事件只能绑定一个处理函数，后赋值的会覆盖前面的。
注意事件监听的时机和作用域
确保DOM元素已存在再绑定事件。常见做法是在DOMContentLoaded事件中操作：
document.addEventListener('DOMContentLoaded', () => {
const btn = document.getElementById('myButton');
btn.addEventListener('click', handleClick);
});
如果元素是动态插入的（比如AJAX加载后添加），考虑使用事件委托：把监听器加在父容器上，利用事件冒泡判断目标元素，例如：
document.querySelector('#list').addEventListener('click', (e) => {
if (e.target.tagName === 'LI') {
console.log('点中了列表项：', e.target.textContent);
}
});
掌握addEventListener和事件委托，就能应对绝大多数交互需求。关键不是记多少事件名，而是理解“谁触发、何时触发、如何响应”这个链条。 
