JavaScript事件是用户交互触发的信号，addEventListener是现代标准事件监听方法，支持多监听、不覆盖，需确保元素存在DOM中，常用获取方式有getElementById等，避免内联事件和执行时机错误。
JavaScript事件是用户与网页交互时触发的信号，比如点击按钮、输入文字、鼠标移动等。为元素添加点击事件，本质是告诉浏览器：“当用户点这个东西时，请执行某段代码”。
什么是事件监听器（addEventListener）
这是现代标准做法，推荐优先使用。它把事件和处理逻辑分开，支持为同一个元素添加多个相同类型的事件，且不会覆盖。
- 语法：
元素.addEventListener('click', 函数) - 函数可以是具名函数，也可以是箭头函数或匿名函数
- 元素必须已存在 DOM 中，否则会报错（可放在
底部，或用DOMContentLoaded确保加载完成）
如何获取目标元素
得先拿到要加事件的 HTML 元素，常用方法有：
-
document.getElementById('btn')—— 通过 id 获取（最常用） -
document.querySelector('.submit')—— 用 CSS 选择器获取第一个匹配项 -
document.querySelectorAll('button')—— 获取所有 button，返回 NodeList，需遍历绑定
一个完整的小例子
假设页面有个按钮：
const btn = document.getElementById('myBtn'
);
btn.addEventListener('click', function() {
alert('你点到了！');
});
);
btn.addEventListener('click', function() {
alert('你点到了！');
});
点击后弹出提示。如果想让函数更清晰，也可写成：
function handleClick() {
console.log('按钮被点击了');
}
btn.addEventListener('click', handleClick);
注意避免的常见问题
不要直接写 onclick="doSomething()" 在 HTML 里 —— 这属于内联事件，不利于维护，也不符合关注点分离原则。
- 确保 JS 代码在元素之后执行，或包装在
DOMContentLoaded中 - 如果元素是动态生成的（比如用 JS 插入），要用事件委托（监听父容器，判断
event.target） - 不需要时可调用
removeEventListener移除，防止内存泄漏（尤其在单页应用中）
