搞懂 Event：是什么、有什么用、用在哪、解决什么问题
.event（事件对象）是 JS 事件驱动模型的核心产物：当用户在网页上做任何动作（点击、输入、按键等）时，浏览器会自动生成一个包含该动作所有细节的对象，这个对象就是 event（我们通常简写为 e）。
Event 有什么用？解决了什么问题？
如果没有 event，你根本不知道用户具体做了什么和实现不了你想要的特定功能
- 不知道他点了页面上的哪个元素
- 不知道他按了键盘的 “回车” 还是 “ESC”
- 不知道他鼠标在图片的哪个位置
- 不知道他在输入框里写了什么
- 你点链接，它非要跳转走
通过 e.xxx 属性，你能精准读取所有细节：
| 属性 | 解决的问题 |
|---|---|
e.target | 你到底点了 / 操作了谁？ |
e.key | 你按了键盘的哪个键？ |
e.offsetX/Y | 你鼠标在元素的哪个位置？ |
e.target.value | 你在输入框里写了什么？ |
通过 e.xxx() 方法，你能强行修改浏览器的默认行为：
| 方法 | 解决的问题 |
|---|---|
e.preventDefault() | 阻止浏览器默认行为（如表单刷新、链接跳转） |
e.stopPropagation() | 阻止事件冒泡（如只关弹窗，不触发背景） |
具体请查看MDN - Event文档
Event 使用在什么场景？
动态列表 / 事件委托
问题：列表里的元素是动态添加的，每次添加都重新绑事件太麻烦。
用 Event 解决：给父元素绑事件，用 e.target 判断真正点击的是谁。
// 只给 ul 绑一次事件，动态添加的 li 也能响应
ul.addEventListener('click', function(e) {
if (e.target.classList.contains('delBtn')) {
e.target.parentElement.remove(); // 删除对应的 li
}
});
表单验证
问题：用户输入不对时，不能让表单提交刷新页面。
用 Event 解决：用 e.preventDefault() 阻止默认提交。
form.addEventListener('submit', function(e) {
if (!email.includes('@')) {
e.preventDefault(); // 阻止刷新
alert('邮箱格式不对！');
}
});
回车提交 / ESC 关闭
问题：不知道用户按了哪个键，无法实现快捷操作。
用 Event 解决：用 e.key 判断按键。
input.addEventListener('keydown', function(e) {
if (e.key === 'Enter') submit(); // 回车提交
if (e.key === 'Escape') closeModal(); // ESC 关闭弹窗
});
弹窗关闭（阻止冒泡）
问题：点击弹窗里的关闭按钮，会连弹窗背景一起触发，导致弹窗关了又开。
用 Event 解决：用 e.stopPropagation() 阻止事件传到父元素。
closeBtn.addEventListener('click', function(e) {
e.stopPropagation(); // 不让事件传到背景
modal.style.display = 'none';
});
鼠标跟随 / 画图
问题：不知道鼠标在元素的哪个位置，无法实现交互效果。
用 Event 解决：用 e.offsetX/Y 获取坐标。
canvas.addEventListener('mousemove', function(e) {
console.log('鼠标在画布内的坐标：', e.offsetX, e.offsetY);
// 这里可以写画图逻辑
});
