17370845950

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('按钮被点了');
});

也可以传入具名函数或箭头函数，方便后续移除：

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);
  }
});

这种方式节省内存，也天然支持后续新增的子元素。