在前端开发中，JavaScript 事件是实现页面交互的核心 —— 从点击按钮触发弹窗，到滚动页面加载数据，再到输入框实时校验，几乎所有用户与页面的互动都离不开事件机制。本文将梳理 JavaScript 中最常用的几类事件，结合实战案例讲解其用法，帮你彻底掌握前端交互的底层逻辑。

一、事件的核心概念

在开始具体事件讲解前，先明确两个基础概念：

• 事件：用户或浏览器自身执行的某种动作（如点击、加载、输入）。
• 事件处理程序：绑定在事件上的函数，当事件触发时自动执行（也叫 “事件监听 / 事件回调”）。

绑定事件的常用方式有三种：

// 1. HTML 内联绑定（不推荐，耦合性高）
<button onclick="alert('点击了')">按钮</button>

// 2. DOM 属性绑定（简单场景可用）
const btn = document.querySelector('button');
btn.onclick = function() { alert('点击了') };

// 3. 事件监听（推荐，可绑定多个处理函数）
btn.addEventListener('click', () => { alert('点击了') });

下文所有案例均采用 addEventListener 方式，这是符合现代前端开发规范的写法。

二、JavaScript 常用事件分类与实战

1. 鼠标事件：处理鼠标交互

鼠标事件是最基础、最常用的事件类型，覆盖鼠标点击、移动、悬浮等操作。

事件名	触发时机
click	鼠标左键单击元素
dblclick	鼠标左键双击元素
mouseover	鼠标移入元素（含子元素）
mouseout	鼠标移出元素（含子元素）
mouseenter	鼠标移入元素（不含子元素，性能更优）
mouseleave	鼠标移出元素（不含子元素，性能更优）
mousedown	鼠标按下（任意键）
mouseup	鼠标松开（任意键）
mousemove	鼠标在元素内移动

实战案例：实现鼠标悬浮高亮 + 点击计数

<div class="box" style="width: 200px; height: 100px; border: 1px solid #ccc; margin: 20px;">
  点击次数：<span id="count">0</span>
</div>

<script>
const box = document.querySelector('.box');
const countSpan = document.getElementById('count');
let count = 0;

// 鼠标移入高亮
box.addEventListener('mouseenter', () => {
  box.style.backgroundColor = '#f5f5f5';
});

// 鼠标移出恢复
box.addEventListener('mouseleave', () => {
  box.style.backgroundColor = '';
});

// 点击计数
box.addEventListener('click', () => {
  count++;
  countSpan.textContent = count;
});
</script>

小贴士：mouseenter/mouseleave 不会冒泡，相比 mouseover/mouseout 减少不必要的触发，推荐优先使用。

2. 键盘事件：处理键盘操作

键盘事件用于监听用户的键盘输入，常见于表单校验、快捷键实现等场景。

事件名	触发时机
keydown	键盘按键按下（持续按会重复触发）
keyup	键盘按键松开
keypress	按下字符键（已废弃，推荐用 keydown/keyup）

实战案例：实现输入框回车提交 + 禁止输入数字

<input type="text" id="input" placeholder="输入非数字内容，回车提交">
<div id="tip" style="color: red; margin-top: 10px;"></div>

<script>
const input = document.getElementById('input');
const tip = document.getElementById('tip');

// 禁止输入数字
input.addEventListener('keydown', (e) => {
  // e.key 获取按下的键，0-9 直接阻止默认行为
  if (/[0-9]/.test(e.key)) {
    e.preventDefault();
    tip.textContent = '禁止输入数字！';
    // 3秒后清空提示
    setTimeout(() => tip.textContent = '', 3000);
  }
});

// 回车提交
input.addEventListener('keyup', (e) => {
  if (e.key === 'Enter' && input.value.trim()) {
    alert(`提交内容：${input.value}`);
    input.value = '';
  }
});
</script>

3. 表单事件：处理表单交互

表单是前端与用户数据交互的核心，表单事件专门处理输入、提交、重置等操作。

事件名	触发时机
input	输入框内容变化（实时触发）
change	表单元素值变化且失去焦点（如下拉框选择、复选框勾选）
submit	表单提交（点击提交按钮 / 回车）
reset	表单重置
focus	元素获得焦点
blur	元素失去焦点

实战案例：实时校验手机号 + 表单提交拦截

<form id="form">
  <div>
    <label>手机号：</label>
    <input type="tel" id="phone" placeholder="请输入11位手机号">
    <span id="phoneTip" style="color: red; font-size: 12px; margin-left: 10px;"></span>
  </div>
  <button type="submit" style="margin-top: 10px;">提交</button>
</form>

<script>
const form = document.getElementById('form');
const phone = document.getElementById('phone');
const phoneTip = document.getElementById('phoneTip');

// 实时校验手机号
phone.addEventListener('input', () => {
  const phoneVal = phone.value.trim();
  const reg = /^1[3-9]\d{9}$/;
  
  if (phoneVal === '') {
    phoneTip.textContent = '请输入手机号';
  } else if (!reg.test(phoneVal)) {
    phoneTip.textContent = '手机号格式错误';
  } else {
    phoneTip.textContent = '✓ 格式正确';
    phoneTip.style.color = 'green';
  }
});

// 失去焦点恢复提示样式
phone.addEventListener('blur', () => {
  if (phoneTip.textContent) {
    phoneTip.style.color = 'red';
  }
});

// 表单提交拦截
form.addEventListener('submit', (e) => {
  e.preventDefault(); // 阻止默认提交行为
  const phoneVal = phone.value.trim();
  const reg = /^1[3-9]\d{9}$/;
  
  if (!reg.test(phoneVal)) {
    phoneTip.textContent = '请输入正确的手机号';
    phone.focus(); // 聚焦到输入框
    return;
  }
  
  // 校验通过，执行提交逻辑（如AJAX请求）
  alert('表单提交成功！');
});
</script>

4. 窗口 / 文档事件：处理页面加载与窗口变化

这类事件针对浏览器窗口或整个文档，常用于页面初始化、适配窗口大小等场景。

事件名	触发时机
load	页面所有资源（图片、脚本、样式）加载完成
DOMContentLoaded	DOM 加载完成（无需等待图片 / 样式，执行更快）
resize	窗口大小改变
scroll	页面滚动
unload	页面关闭 / 刷新（现代浏览器已限制部分操作）

实战案例：页面滚动显示回到顶部按钮 + 窗口适配

<button id="backTop" style="position: fixed; bottom: 50px; right: 50px; display: none; padding: 10px;">回到顶部</button>

<script>
const backTop = document.getElementById('backTop');

// DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM加载完成，可操作DOM元素');
  
  // 窗口滚动监听
  window.addEventListener('scroll', () => {
    // 获取滚动距离
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 滚动超过300px显示按钮
    backTop.style.display = scrollTop > 300 ? 'block' : 'none';
  });
  
  // 回到顶部
  backTop.addEventListener('click', () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth' // 平滑滚动
    });
  });
  
  // 窗口大小变化适配
  window.addEventListener('resize', () => {
    console.log('窗口宽度：', window.innerWidth);
    // 响应式逻辑可在此实现
  });
});
</script>

5. 触摸事件：适配移动端

移动端开发中，触摸事件替代鼠标事件，处理手指操作：

事件名	触发时机
touchstart	手指触摸元素
touchmove	手指在元素上移动
touchend	手指离开元素
touchcancel	触摸被中断（如来电、弹窗）

实战案例：移动端简单的拖拽效果

<div id="dragBox" style="width: 100px; height: 100px; background: #42b983; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>

<script>
const dragBox = document.getElementById('dragBox');
let startX, startY, boxX, boxY;

// 触摸开始
dragBox.addEventListener('touchstart', (e) => {
  // 阻止默认滚动行为
  e.preventDefault();
  // 获取触摸点初始坐标
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
  // 获取盒子当前位置
  boxX = dragBox.offsetLeft;
  boxY = dragBox.offsetTop;
});

// 触摸移动
dragBox.addEventListener('touchmove', (e) => {
  e.preventDefault();
  // 计算移动距离
  const moveX = e.touches[0].clientX - startX;
  const moveY = e.touches[0].clientY - startY;
  // 更新盒子位置
  dragBox.style.left = boxX + moveX + 'px';
  dragBox.style.top = boxY + moveY + 'px';
});
</script>

三、事件开发的核心注意事项

实际开发中，建议根据场景选择合适的事件：实时交互用 input/mousemove，性能优先用 mouseenter 替代 mouseover，移动端优先适配触摸事件。同时注意事件的性能优化，避免不必要的事件触发和内存泄漏，让页面交互更流畅。

四、总结

JavaScript 事件是前端交互的基石，本文梳理的鼠标、键盘、表单、窗口 / 文档、触摸事件覆盖了 90% 以上的开发场景。掌握这些事件的触发时机和实战用法，结合事件委托、冒泡 / 捕获等核心机制，就能高效实现各类页面交互效果。

1. 事件冒泡与捕获：默认事件是冒泡模式（从子元素到父元素），可通过 addEventListener 第三个参数 true 开启捕获模式；必要时用 e.stopPropagation() 阻止冒泡。
2. 事件委托：利用冒泡特性，将子元素事件绑定到父元素，减少事件绑定数量，适合动态生成的元素：

   // 事件委托示例：给列表所有项绑定点击事件
   const ul = document.querySelector('ul');
   ul.addEventListener('click', (e) => {
     if (e.target.tagName === 'LI') {
       alert(`点击了${e.target.textContent}`);
     }
   });

3. 移除事件监听：使用 removeEventListener 移除不再需要的事件，避免内存泄漏（注意：必须传入与绑定相同的函数引用）。
4. 阻止默认行为：通过 e.preventDefault() 阻止浏览器默认行为（如表单提交、链接跳转）。