事件绑定机制演变
jQuery 的事件绑定方法历经多个版本的迭代，核心目标在于提供更统一、更高效的 API。早期版本提供了 .bind()、.live() 和 .delegate() 等方法，但在 1.7 版本之后，推荐使用 .on() 方法统一处理所有事件绑定，因为它涵盖了前述所有方法的功能，并提供了更一致的行为和更好的性能。
核心绑定方法：.on()
.on() 方法是 jQuery 中推荐用于附加事件处理程序的核心方法。其基本语法为 .on( events [, selector ] [, data ], handler )。events 可以是一个或多个空格分隔的事件类型和可选命名空间，selector 用于实现事件委托，data 可在事件触发时传递给 handler，handler 则为处理函数。
| 版本 | 变更说明 |
|---|---|
| 1.7 | 引入 .on() 和 .off() 方法，取代旧的 .bind(), .live(), .delegate()。 |
| 1.9 | 移除了 .live() 方法，推荐使用 .on() 进行事件委托。 |
| 3.0 | 移除了对已弃用的事件方法（如 .load()、.unload() 和 .error()）的别名支持。 |
一次性绑定：.one()
.one() 方法的语法与 .on() 完全一致，但其附加的处理程序在执行一次后会自动解除绑定。对于每个匹配的元素，事件处理函数只会被执行一次。
移除绑定：.off()
.off() 方法用于移除通过 .on() 绑定的事件处理程序。其基本语法为 .off( events [, selector ] [, handler ] )。如果不提供任何参数，则会移除目标元素上的所有事件处理程序。
| 版本 | 变更说明 |
|---|---|
| 1.7 | 引入 .off() 方法，与 .on() 对应，用于移除事件绑定。 |
事件方法
除了核心的 .on() 方法，jQuery 还提供了一系列便捷方法，用于绑定特定事件或直接触发这些事件。这些方法简化了常见事件的绑定过程。
| 方法 | 说明 | 版本引入 |
|---|---|---|
.click() | 绑定 “click” 事件或触发该事件。 | 1.0 |
.dblclick() | 绑定 “dblclick” 事件或触发该事件。 | 1.0 |
.hover() | 绑定一个或两个处理程序，用于处理鼠标指针进入和离开元素时的操作。 | 1.0 |
.mousedown() | 绑定 “mousedown” 事件或触发该事件。 | 1.0 |
.mouseup() | 绑定 “mouseup” 事件或触发该事件。 | 1.0 |
.mouseenter() | 绑定 “mouseenter” 事件或触发该事件。该事件不冒泡，避免了 mouseover 的频繁触发问题。 | 1.0 |
.mouseleave() | 绑定 “mouseleave” 事件或触发该事件。该事件不冒泡，避免了 mouseout 的频繁触发问题。 | 1.0 |
.mousemove() | 绑定 “mousemove” 事件或触发该事件。 | 1.0 |
.mouseover() | 绑定 “mouseover” 事件或触发该事件。 | 1.0 |
.mouseout() | 绑定 “mouseout” 事件或触发该事件。 | 1.0 |
.keydown() | 绑定 “keydown” 事件或触发该事件。 | 1.0 |
.keypress() | 绑定 “keypress” 事件或触发该事件。 | 1.0 |
.keyup() | 绑定 “keyup” 事件或触发该事件。 | 1.0 |
.focus() | 绑定 “focus” 事件或触发该事件。 | 1.0 |
.blur() | 绑定 “blur” 事件或触发该事件。 | 1.0 |
.focusin() | 绑定 “focusin” 事件或触发该事件。该事件支持冒泡。 | 1.4 |
.focusout() | 绑定 “focusout” 事件或触发该事件。该事件支持冒泡。 | 1.4 |
.change() | 绑定 “change” 事件或触发该事件。 | 1.0 |
.select() | 绑定 “select” 事件或触发该事件。 | 1.0 |
.submit() | 绑定 “submit” 事件或触发该事件。 | 1.0 |
.scroll() | 绑定 “scroll” 事件或触发该事件。 | 1.0 |
.resize() | 绑定 “resize” 事件或触发该事件。 | 1.0 |
.ready() | 指定一个函数在 DOM 完全加载后执行。注意：.ready() 只接受一个函数参数。 | 1.0 |
.contextmenu() | 绑定 “contextmenu” 事件或触发该事件。 | 1.0 |
事件对象
当事件处理程序被触发时，它会接收到一个 jQuery 事件对象。该对象标准化了浏览器之间的差异，并提供了一系列属性和方法来处理事件。
属性
事件对象包含了许多有用的属性，用于获取事件的相关信息。
| 属性 | 说明 | 版本引入 |
|---|---|---|
event.type | 返回描述事件类型的字符串（例如 “click”）。 | 1.0 |
event.target | 获取触发事件的原始 DOM 元素。 | 1.0 |
event.currentTarget | 获取当前正在处理事件的 DOM 元素（即事件处理程序被绑定到的元素）。在事件委托中，这与 target 不同。 | 1.3 |
event.delegateTarget | 获取绑定了事件处理程序的元素（即调用 .on() 的元素）。 | 1.7 |
event.relatedTarget | 获取与事件相关的其他 DOM 元素（例如 mouseover 时移出的元素，mouseout 时移入的元素）。 | 1.1.4 |
event.pageX / event.pageY | 获取鼠标相对于文档左/上边缘的位置。 | 1.0.4 |
event.which | 获取按下的特定键或按钮。对于键盘事件，返回键码；对于鼠标事件，返回 1（左键）、2（中键）或 3（右键）。 | 1.1.3 |
event.metaKey | 返回一个布尔值，指示事件触发时 META 键（在 Mac 中是 Command 键，在 Windows 中是 Windows 键）是否被按下。 | 1.0.4 |
event.ctrlKey | 返回一个布尔值，指示 Ctrl 键是否被按下。 | 1.4.3 |
event.shiftKey | 返回一个布尔值，指示 Shift 键是否被按下。 | 1.4.3 |
event.altKey | 返回一个布尔值，指示 Alt 键是否被按下。 | 1.4.3 |
event.data | 获取绑定事件时通过 .on() 的 data 参数传递的额外数据。 | 1.1 |
event.namespace | 获取事件触发时指定的命名空间。 | 1.4.3 |
event.timeStamp | 返回事件创建时与 1970 年 1 月 1 日之间的时间差（以毫秒为单位）。 | 1.0 |
event.result | 获取由该事件触发的上一个处理程序返回的值。 | 1.1.3 |
方法
事件对象的方法用于控制事件的传播和默认行为。
| 方法 | 说明 | 版本引入 |
|---|---|---|
event.preventDefault() | 阻止事件的默认行为（例如，阻止点击链接后跳转）。 | 1.0 |
event.isDefaultPrevented() | 返回一个布尔值，指示是否曾对该事件对象调用过 preventDefault()。 | 1.3 |
event.stopPropagation() | 阻止事件冒泡到父元素。 | 1.0 |
event.isPropagationStopped() | 返回一个布尔值，指示是否曾对该事件对象调用过 stopPropagation()。 | 1.3 |
event.stopImmediatePropagation() | 阻止剩余的事件处理程序被执行，并阻止事件冒泡。 | 1.3 |
event.isImmediatePropagationStopped() | 返回一个布尔值，指示是否曾对该事件对象调用过 stopImmediatePropagation()。 | 1.3 |
特殊事件机制
事件委托
事件委托依赖于事件冒泡，通过将事件处理程序绑定到一个父元素上，来管理所有符合选择器的子元素（包括当前存在或未来动态添加的）的事件。这在处理大量动态元素时，能显著提升性能和简化代码。在 .on() 方法中，通过传递 selector 参数即可实现事件委托。$( "#parent-list" ).on( "click", "li", function() { ... } );
命名空间
命名空间允许将事件触发或处理程序进行分组。在绑定事件时，可以在事件类型后附加一个点号和一个名称（如 “click.myPlugin”）。这使得后续可以仅触发或解绑特定命名空间下的事件，而不影响其他同类型的事件。$( "#element" ).on( "click.myNamespace", function() { ... } );
自定义事件
jQuery 的事件系统是基于发布/订阅模式构建的，因此可以创建和触发完全自定义的事件。自定义事件可以利用事件冒泡机制，并通过 .trigger() 方法来触发，同时可以携带数据。$( "#element" ).on( "myCustomEvent", function( event, param1, param2 ) { ... } );$( "#element" ).trigger( "myCustomEvent", [ "value1", "value2" ] );
事件触发与处理
.trigger() 方法用于执行绑定到匹配元素的所有事件处理程序和行为，它不仅会执行通过 jQuery 绑定的事件处理程序，还会执行浏览器默认行为（例如，触发一个按钮的 click 事件会导致按钮被高亮）。.triggerHandler() 方法则不同，它只会执行通过 .on() 绑定的事件处理程序，而不会执行浏览器默认行为，并且不会导致事件冒泡。
| 方法 | 说明 | 版本引入 |
|---|---|---|
.trigger() | 对匹配的元素执行所有绑定的事件处理程序以及浏览器默认行为。 | 1.0 |
.triggerHandler() | 仅执行绑定的事件处理程序，不执行浏览器默认行为，且不产生事件冒泡。 | 1.2 |
事件优化与内存管理
妥善管理事件绑定是避免内存泄漏和提升页面性能的关键。最佳实践包括：对于动态添加的元素，优先使用事件委托；在移除 DOM 元素前，使用 .off() 方法主动移除其绑定的事件，以便垃圾回收；避免在频繁触发的事件（如 resize、scroll、mousemove）的处理程序中执行复杂计算，可以结合函数防抖（debounce）或节流（throttle）技术进行优化。
jQuery 事件参考手册系统地梳理了从事件绑定、便捷方法、事件对象到高级事件机制的完整知识体系。从早期 1.0 版本引入的基础事件方法，到 1.7 版本确立以 .on() 和 .off() 为核心的事件处理模型，jQuery 始终致力于为开发者提供强大、统一且跨浏览器的事件处理方案。理解并熟练运用这些 API，是高效实现页面交互、构建复杂应用的关键。这份 jQuery 事件参考手册旨在作为日常开发中的快速查阅工具，帮助开发者应对各种事件处理场景。