JavaScript中常见用户事件有click、input、change、keydown/keyup、submit、mouseenter/mouseleave；通过addEventListener添加响应，事件对象含target、currentTarget、preventDefault等属性方法；事件委托可高效处理动态元素。
JavaScript 中的事件是用户或浏览器自身触发的“信号”，比如点击按钮、按下键盘、页面加载完成、鼠标移入某个区域等。处理这些事件，就是让代码在特定动作发生时自动执行，从而实现交互功能。
常见的用户事件有哪些？
开发中最常监听的事件包括：
- click：鼠标左键单击（也适用于触摸屏的轻触）
- input 和 change：用于表单元素，input 在内容变化时实时触发（如打字），change 在失去焦点且值已改变后才触发（如选完下拉项）
- keydown / keyup：按键按下或抬起，适合做快捷键或输入限制
- submit：表单提交，常用来拦截默认提交行为并用 JS 发送数据
- mouseenter / mouseleave：鼠标进入或离开元素范围（不冒泡，比 mouseover 更精准）
如何给元素添加事件响应？
主流方式是使用 addEventListener() 方法，它更灵活、可多次绑定同一事件，且支持控制捕获/冒泡阶段：
const btn = document.getElementById('myBtn');
btn.addEventListener('click', function() {
console.log('按钮被点了');
});
也可以传入具名函数或箭头函数，方便后续移除：
立即学习“Java免费学习笔记（深入）”；
function handleClick() { alert('已响应'); }
btn.addEventListener('click', handleClick);
// 移除时写：btn.removeEventListener('click', handleClick);
事件对象里有什么有用信息？
回调函数默认接收一个 event 对象，它包含大量上下文数据：
- event.target：真正触发事件的元素（可能和绑定元素不同，因事件冒泡）
- event.currentTarget：当前绑定事件监听器的那个元素
- event.preventDefault()：阻止默认行为（如点击链接跳转、表单提交刷新页面）
- event.stopPropagation()：阻止事件继续向上冒泡
- 对键盘事件，可用 event.key 或 event.code 判断按了哪个键
注意事件委托这个实用技巧
当页面中有一组动态增删的元素（比如列表项），不必每个都单独绑定事件。可以监听父容器，在回调中通过 event.target 判断具体是哪个子元素触发的：
document.getElementById('list').addEventListener('click', function(e) {
if (e.target.tagName === 'LI') {
console.log('点中了列表项：', e.target.textContent);
}
});
这种方式节省内存，也天然支持后续新增的子元素。
