JavaScript常用事件

一、鼠标移动事件

1.1 核心事件类型

• mousemove：光标在元素内移动时持续触发

• mouseenter/mouseleave：进出元素边界触发（不冒泡）

• mouseover/mouseout：进出元素或子元素触发（冒泡）

1.2 性能优化策略

// 节流函数实现
function throttle(func, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = new Date().getTime();
    if (now - lastCall < delay) return;
    lastCall = now;
    func.apply(this, args);
  }
}

// 应用节流
element.addEventListener('mousemove', throttle((e) => {
  console.log(`X: ${e.clientX}, Y: ${e.clientY}`);
}), 100);

1.3 实战案例：实时坐标追踪

<div id="tracker" style="position: fixed;"></div>

<script>
  document.addEventListener('mousemove', (e) => {
    const tracker = document.getElementById('tracker');
    tracker.style.left = `${e.clientX + 15}px`;
    tracker.style.top = `${e.clientY + 15}px`;
    tracker.textContent = `(${e.clientX}, ${e.clientY})`;
  });
</script>

重点注意：高频触发事件需进行性能优化，避免过度重绘

---

二、点击事件体系

2.1 事件触发顺序

1. mousedown

2. mouseup

3. click

4. dblclick（快速双击时）

2.2 事件对象关键属性

element.addEventListener('click', (e) => {
  console.log('Button:', e.button); // 0-左键, 1-中键, 2-右键
  console.log('Modifiers:', 
    e.ctrlKey, e.shiftKey, e.altKey, e.metaKey);
});

2.3 实战案例：自定义右键菜单

document.addEventListener('contextmenu', (e) => {
  e.preventDefault();
  const menu = document.getElementById('custom-menu');
  menu.style.display = 'block';
  menu.style.left = `${e.clientX}px`;
  menu.style.top = `${e.clientY}px`;
});

document.addEventListener('click', () => {
  document.getElementById('custom-menu').style.display = 'none';
});

常见错误：忘记阻止默认右键菜单（e.preventDefault()）

---

三、页面生命周期事件

3.1 核心事件对比

事件	触发时机	适用场景
DOMContentLoaded	HTML解析完成	DOM操作初始化
load	所有资源加载完成	性能统计
beforeunload	页面关闭前	数据保存提示
unload	页面卸载时	清理操作

3.2 性能优化实践

window.addEventListener('load', () => {
  // 延迟加载非关键资源
  const lazyImages = document.querySelectorAll('.lazy');
  lazyImages.forEach(img => {
    img.src = img.dataset.src;
  });
});

---

四、表单焦点事件

4.1 事件触发机制

const input = document.querySelector('input');

input.addEventListener('focus', () => {
  input.parentElement.classList.add('active');
});

input.addEventListener('blur', () => {
  if (!input.value) {
    input.parentElement.classList.remove('active');
  }
});

4.2 实时验证案例

emailInput.addEventListener('input', () => {
  const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput.value);
  emailInput.setCustomValidity(isValid ? '' : 'Invalid email');
});

重点提示：优先使用input事件而非change实现实时反馈

---

五、键盘事件深度解析

5.1 事件类型对比表

事件	触发阶段	典型应用
keydown	按键按下时	快捷键检测
keypress	字符输入时	字符输入过滤
keyup	按键释放时	组合键操作

5.2 快捷键实现示例

document.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.key === 's') {
    e.preventDefault();
    saveDocument();
  }
});

兼容性注意：优先使用e.key而非keyCode

---

六、表单提交与重置

6.1 事件拦截实践

document.querySelector('form').addEventListener('submit', (e) => {
  if (!validateForm()) {
    e.preventDefault();
    showError('请完善表单信息');
  }
});

6.2 重置确认案例

form.addEventListener('reset', (e) => {
  if (!confirm('确认要重置所有内容吗？')) {
    e.preventDefault();
  }
});

---

七、选择与变更事件

7.1 事件对比分析

const textarea = document.querySelector('textarea');

// 选择文本时触发
textarea.addEventListener('select', () => {
  console.log('Selected text:', 
    textarea.value.substring(textarea.selectionStart, textarea.selectionEnd));
});

// 值改变时触发（需失焦）
textarea.addEventListener('change', () => {
  console.log('Final value:', textarea.value);
});

// 实时输入监听
textarea.addEventListener('input', () => {
  characterCount.textContent = textarea.value.length;
});

---

实战测试题

1. 以下哪种事件组合能准确检测文本选择操作？
   A) click + keyup
   B) select + mouseup
   C) focus + input
   D) mousedown + mouseup

2. 实现表单提交时数据验证的正确方式是：

// 选项代码...

---

总结与最佳实践

• 事件委托：利用冒泡机制优化性能

document.getElementById('list').addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    handleItemClick(e.target);
  }
});

• 内存管理：及时移除无用事件监听
• 移动端适配：结合touch事件处理

        通过系统掌握这些事件处理技术，开发者可以构建出响应灵敏、用户体验优秀的Web应用。建议结合Chrome DevTools的Event Listener检测功能进行调试优化。