JavaScript事件是浏览器在特定时机自动发出的信号，如点击、输入、页面加载完成等，本身不执行逻辑，仅作为触发开关；需用addEventListener绑定函数处理，注意事件名用字符串、参数为函数引用、及时清理避免内存泄漏。
JavaScript 事件不是“要学的另一个知识点”，而是网页产生响应的唯一机制——没事件，点击、输入、滚动全都不会触发任何反应。
什么是事件？别被概念绕晕，只记三件事
事件是浏览器在特定时机自动发出的信号，比如用户点了按钮、页面加载完成、键盘按下了某个键。它本身不执行逻辑，只负责“喊一嗓子”：「这里发生了 XX！」
真正干活的是你写的函数，也就是事件处理程序（event handler）。关键在于：事件 ≠ 功能，事件只是开关。
-
click、input、submit、load都是事件类型，不是函数名，不能直接调用 - 浏览器只在特定条件下触发它们，比如
click必须有真实鼠标/触摸动作，load等待整个页面资源就绪 - 同一个元素可以监听多个事件，但一个事件只能绑定多个处理函数（用
addEventListener）
怎么给按钮加点击响应？两种写法，推荐后者
老式写法：onclick 属性直接写 JS 表达式，看似简单，问题一堆：
立即学习“Java免费学习笔记（深入）”；
这行代码看着省事，但破坏 HTML 结构语义，无法复用，调试困难，且每次赋值会覆盖前一个 onclick。
正确做法是用 addEventListener，分离结构与行为：
const btn = document.querySelector('button');
btn.addEventListener('click', function() {
console.log('真的被点了');
});
- 必须先用
querySelector或getElementById拿到 DOM 元素，再绑定，否则报错Cannot read property 'addEventListener' of null - 事件名用字符串，如
'click'，不是click()，也不是Click - 第二个参数必须是函数（可以是匿名函数、命名函数或箭头函数），不能是函数调用结果，比如
handler()是错的，handler才对
表单输入实时响应？小心 input 和 change 的区别
想让用户每敲一个字就做点事（比如搜索建议），用 input；想等用户输完、失焦再处理（比如校验邮箱格式），用 change。
常见误区是用 keyup 替代 input —— 它漏掉粘贴、语音输入、自动填充等非键盘操作，input 才是真正反映值变化的事件。
const input = document.querySelector('input');
input.addEventListener('input', function(e) {
console.log('当前值：', e.target.value); // e.target 指向触发事件的 input 元素
});
-
input在、上有效，用change - 别在
input里直接修改e.target.value，可能引发输入错乱；要用e.target.value = ...+e.preventDefault()组合才安全 - 如果绑定太多
input处理函数，记得节流（debounce），否则滚动或快速输入时性能骤降
事件监听后怎么移除？不清理会内存泄漏
动态添加的监听器，尤其是单页应用中反复创建组件时，不手动移除会导致旧函数一直驻留内存，还可能触发已销毁组件的逻辑。
移除必须用和绑定时**完全相同的函数引用**：
function handleClick() { console.log('处理点击'); }
btn.addEventListener('click', handleClick);
// ……后来想取消
btn.removeEventListener('click', handleClick); // ✅ 正确
- 用匿名函数或箭头函数绑定，就无法移除：
btn.addEventListener('click', () => {...})→ 移除失效 - 如果用了
{ once: true }选项，事件触发一次后自动解绑，不用手动移除 - 现代框架（React/Vue）通常帮你管理，但原生 JS 或微前端场景下，这个细节常被忽略
事件机制本身很轻，但组合使用时容易陷入嵌套监听、重复绑定、忘记清理的循环里。最常出问题的不是“不会写”，而是“写了但没验证是否真触发”——建议每个事件绑定后，立刻在控制台打一行 console.log，确认它真的响了。
