jQuery 事件
事件就是"用户对页面做了什么"：点击、悬停、输入、按键盘……jQuery 把各种事件处理封装成简单方法，让你用 元素.事件(处理函数) 的句式响应操作，是交互开发的核心。
常见事件方法
| 分类 | 方法 | 触发时机 |
|---|---|---|
| 鼠标 | click() | 单击元素 |
| 鼠标 | dblclick() | 双击元素 |
| 鼠标 | mouseenter() | 鼠标指针进入元素 |
| 鼠标 | mouseleave() | 鼠标指针离开元素 |
| 鼠标 | hover() | 进入/离开各执行一个函数 |
| 键盘 | keydown() | 按下键盘按键 |
| 键盘 | keyup() | 松开键盘按键 |
| 表单 | focus() | 输入框获得焦点 |
| 表单 | blur() | 输入框失去焦点 |
| 表单 | change() | 表单值发生改变 |
常用事件示例
$('#btn').click(function () {
alert('按钮被单击了'); // 效果：弹出提示
});
$('#box').hover(
function () { $(this).css('color', 'red'); }, // 进入时变红
function () { $(this).css('color', 'black'); } // 离开时变黑
);
完整示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 引入 jQuery（https://example.com 为占位地址，实际使用时请替换为真实 CDN 或本地文件） -->
<script src="https://example.com/jquery.min.js"></script>
</head>
<body>
<button id="mybtn">单击我</button>
<p id="tip" style="width:200px;background:#eee;padding:10px;">鼠标移到我身上</p>
<script>
$(function () {
// 单击按钮：弹出提示
$('#mybtn').click(function () {
alert('你单击了按钮');
});
// 鼠标进入与离开：文字颜色交替变化
$('#tip').mouseenter(function () {
$(this).css('background', '#ffe08a');
});
$('#tip').mouseleave(function () {
$(this).css('background', '#eee');
});
});
</script>
</body>
</html>
效果说明：单击按钮弹出对话框；鼠标进入灰色区域时背景变黄、移出后恢复灰色。
on() 与 off() 动态绑定
click() 这类写法是快捷方法，底层等价于 on('click', fn)。使用 on() 可以一次绑定多个事件，off() 用于解除绑定：
// 一次绑定两个事件
$('#box').on('mouseenter mouseleave', function () {
$(this).toggleClass('active');
});
// 解除全部事件
$('#box').off();
// 只解除 click 事件
$('#box').off('click');
对动态新增的元素，用 on() 配合委托写法才能让事件生效：$(父容器).on('click', '子元素选择器', fn)。
小结
事件方法让你用一句话响应点击、悬停、输入等用户操作；动态元素请用 on() 委托绑定。结合前面的选择器，你已经能做出基本的交互页面了。