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检测功能进行调试优化。