🎯 课程目标
完成本课程后，你将能够：
- 理解JavaScript事件模型的基本原理
- 掌握各种事件类型的用法
- 能够为元素绑定和移除事件监听器
- 理解事件对象和事件冒泡机制
- 能够实现事件委托优化性能
📖 事件概述
事件是浏览器和用户交互的桥梁。当用户点击按钮、按下键盘、滚动页面时，都会触发相应的事件。通过事件处理，我们可以对用户的操作做出响应，实现交互式的网页。
✨ 常见事件类型
- 鼠标事件：click、dblclick、mouseenter、mouseleave、mousedown、mouseup
- 键盘事件：keydown、keyup、keypress
- 表单事件：submit、change、input、focus、blur
- 窗口事件：load、resize、scroll、unload
- 触摸事件：touchstart、touchend、touchmove（移动端）
🎧 事件监听器
使用addEventListener方法为元素绑定事件处理函数。
基本用法
const button = document.querySelector('#myButton');
// 方法1：使用addEventListener（推荐）
button.addEventListener('click', function() {
console.log('按钮被点击了！');
});
// 方法2：使用箭头函数
button.addEventListener('click', () => {
console.log('按钮被点击了！');
});
// 方法3：外部定义函数
function handleClick() {
console.log('按钮被点击了！');
}
button.addEventListener('click', handleClick);
// 移除事件监听器
button.removeEventListener('click', handleClick);
// 重要：addEventListener的选项
button.addEventListener('click', handler, {
once: true, // 只触发一次
passive: true, // 声明为被动（不调用preventDefault）
capture: true // 在捕获阶段处理
});
旧版事件绑定方式（不推荐）
const button = document.querySelector('#myButton');
// HTML内联事件（不推荐，难以维护）
<button onclick="handleClick()">点击</button>
// DOM属性绑定（只能绑定一个处理函数）
button.onclick = function() {
console.log('点击');
};
// 缺点：无法同时绑定多个处理函数，会覆盖
button.onclick = function() {
console.log('这个会覆盖上面的');
};
🖱️ 鼠标事件
const box = document.querySelector('.box');
// 单击事件（最常用）
box.addEventListener('click', (e) => {
console.log('点击位置:', e.clientX, e.clientY);
});
// 双击事件
box.addEventListener('dblclick', () => {
console.log('双击！');
});
// 鼠标进入/离开
box.addEventListener('mouseenter', () => {
box.style.backgroundColor = 'lightblue';
});
box.addEventListener('mouseleave', () => {
box.style.backgroundColor = '';
});
// 鼠标按下/抬起
box.addEventListener('mousedown', () => {
console.log('鼠标按下');
});
box.addEventListener('mouseup', () => {
console.log('鼠标抬起');
});
// 鼠标移动（常用于拖拽）
box.addEventListener('mousemove', (e) => {
console.log('鼠标位置:', e.clientX, e.clientY);
});
// 阻止默认右键菜单
box.addEventListener('contextmenu', (e) => {
e.preventDefault();
console.log('右键点击');
});