在前端开发中，事件处理是必不可少的一部分。而jQuery框架提供了强大的事件机制，方便开发者处理各种事件，从简单的鼠标点击事件到复杂的 AJAX 请求。
什么是jQuery事件？
在jQuery中，事件可以是用户交互产生的行为，也可以是浏览器内部的行为。例如，鼠标点击、滚动、键盘输入、窗口调整大小等都是事件。
jQuery提供了一个事件监听器方法——on()，用于监听指定元素上的事件。这个方法接受两个参数：事件类型和事件处理函数。
$(selector).on(event, function)
其中，selector 是需要绑定事件的元素，event 是事件名称（比如 "click"、"focus" 等），function 则是事件被触发时执行的函数。
jQuery事件的分类
jQuery事件可以分为以下几类：
鼠标事件
| 事件名称 | 说明 |
|---|---|
| click | 鼠标左键单击 |
| dblclick | 鼠标左键双击 |
| mousedown | 鼠标按下 |
| mouseup | 鼠标松开 |
| mousemove | 鼠标移动 |
可以通过下面的代码来监听鼠标点击事件：
$("#btn").on("click", function() {
// do something
});键盘事件
| 事件名称 | 说明 |
|---|---|
| keydown | 按下键盘上的键 |
| keyup | 松开键盘上的键 |
| keypress | 在按下并松开键盘上的键后触发 |
下面的代码监听了键盘输入事件：
$(document).on("keydown", function(event) {
console.log("key pressed: " + event.which);
});表单事件
| 事件名称 | 说明 |
|---|---|
| blur | 元素失去焦点 |
| focus | 元素获得焦点 |
| change | 输入框内容改变 |
| select | 文本框中的文字被选中 |
| submit | 表单提交 |
可以通过下面的代码来监听表单提交事件：
$("form").on("submit", function(event) {
// 阻止表单默认提交行为
event.preventDefault();
// do something
});文档加载事件
| 事件名称 | 说明 |
|---|---|
| load | 文档和所有资源都已经加载完毕 |
| ready | DOM结构已经加载完毕，但是图片和其他资源可能还没有加载完成 |
可以通过下面的代码来监听文档加载事件：
$(document).ready(function() {
// do something
});jQuery事件传播模型
jQuery事件传播模型与DOM事件传播模型类似，分为三个阶段：捕获阶段、目标阶段和冒泡阶段。
捕获阶段
在捕获阶段中，事件从祖先元素向下传播到目标元素。如果在这个阶段中，有任何一个元素调用了 event.stopPropagation() 方法，则事件不再继续传播。
目标阶段
当事件到达目标元素时，会触发对应的事件处理函数。
冒泡阶段
在冒泡阶段中，事件从目标元素向上冒泡到祖先元素。如果在这个阶段中，有任何一个元素调用了 event.stopPropagation() 方法，则事件不再继续传播。
jQuery事件的委托机制
jQuery事件委托机制可以用于处理动态添加的元素的事件。元素是"动态添加"的，是指这些元素是通过脚本添加到文
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1203