jQuery 事件方法

事件方法用于绑定"用户操作"与处理函数：点击、悬停、按键、表单提交等。jQuery 把不同浏览器的差异统一成一致的 API，并以 on() 为核心提供大量快捷事件方法。

鼠标事件

方法	触发时机
click / dblclick	单击 / 双击
mouseenter / mouseleave	指针进入 / 离开元素（不冒泡）
mousedown / mouseup	按下 / 松开鼠标键
hover()	一次绑定进入与离开两个处理函数

$("p").hover(
  function () { $(this).css("color", "red"); },  // 指针移入：变红
  function () { $(this).css("color", "black"); } // 指针移出：变黑
);
// 效果：指针划过段落时文字在红黑之间切换

键盘与表单事件

方法	触发时机
keydown / keyup	按下 / 松开任意键
keypress	按下可打印字符键
focus / blur	获得 / 失去焦点
change	表单控件值改变后失焦
submit	表单提交时
select	选中文本框内容时

$("#search").keyup(function () {
  console.log("输入框当前值：" + $(this).val());
  // 输出：输入框当前值：jQ
});
$("#form1").submit(function (e) {
  e.preventDefault(); // 阻止真正提交，先做校验
  console.log("表单被提交");
});

页面事件

方法	触发时机
ready(fn)	DOM 就绪后执行（最常用）
load / unload	页面或图片加载完成 / 离开页面
resize	窗口尺寸变化
scroll	滚动条滚动

$(document).ready(function () {
  // 页面 DOM 结构就绪即可操作，不必等图片加载完
});
// 简写：$(function () { ... }) 效果相同

绑定、解绑与触发

jQuery 3 时代统一用 on / off / one，旧的 bind、live、delegate 已被废弃：

方法	作用
on(events, fn)	绑定事件（核心方法，支持委托）
off(events)	解绑事件
one(events, fn)	只触发一次
trigger(events)	手动触发事件

$("#btn").on("click", function () { alert("绑定成功"); }); // 绑定
$("#btn").off("click");                                    // 解绑
$("#btn").one("click", function () { alert("只弹一次"); }); // 只触发一次
$("#btn").trigger("click");                                // 手动触发，等同点击

事件对象

处理函数可以接收事件对象 e，读取触发细节或干预默认行为：

$("a").click(function (e) {
  e.preventDefault();   // 阻止链接默认跳转
  e.stopPropagation();  // 阻止事件继续冒泡到父元素
  console.log(e.type, e.pageX, e.pageY);
  // 输出：click 42 130（类型与鼠标坐标）
});

小结：事件方法让页面"活"起来。记住 on()/off()/one()/trigger() 四件套与事件对象，再配合 click、hover、submit 等快捷方法，就能覆盖绝大多数交互需求。