jQuery的事件实现，称为jQuery事件模型，它展示如下功能：
- 提供建立事件处理程序的统一方法；
- 允许在每个元素上为每个事件类型建立多个处理程序；
- 采用标准的事件类型名称，例如：click、mouseover等；
- 使Event实例可用作处理程序的参数；
- 对Event实例的最常用的属性进行规范化；
- 为取消事件和阻塞默认操作提供统一方法。
利用jQuery绑定事件处理程序
语法：bind(eventType, data, listener)
功能：在匹配集的所有元素上建立函数，作为指定事件类型的事件处理程序。
参数 eventType：（字符串）为将要建立的处理程序指定事件类型的名称。这个事件类型可以添加命令空间后缀，后缀和事件名称之间以圆点分隔。
参数 data：（对象）调用者提供的数据，作为属性data附加到Event实例，可供事件处理函数使用。如果省略，事件处理函数就被指定为下一个参数。
参数 listener：（函数）将被建立为事件处理程序的函数。
返回：包装集。
// js/bind_demo.js
var say = function(text) {
$('#console').append('<div>' + text + '</div>');
}
$(function() {
$('#vstar').bind('click', function(event) { say('Whee once!'); })
.bind('click', function(event) { say('Whee twice!'); })
.bind('click', function(event) { say('Whee three times!'); });
});
<html>
<head>
<title>jQuery 事件模型示例</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bind_demo.js"></script>
</head>
<body>
<img id="vstar" src="images/vstar.jpg"/>
<div id="console"></div>
</body>
</html>
通过指派命名空间而使事件处理程序分组的能力，随后可以作为一个单元在它们上面进行简便的操作。例如，页面拥有两个模式：显示模式和编辑模式。处于编辑模式时，事件监听器放在许多页面元素上，但这些监听器并不适合显示模式，因此页面从编辑模式迁出时必须删除，可以利用如下代码给编辑模式的事件指派命名空间：
$('#thing1').bind('click.editMode', some1Listener);
$('#thing2').bind('click.editMode', some2Listener);
$('#thingN').bind('click.editMode', someNListener);
通过把所有这些绑定分组到editMode命名空间，随后我们可把它们当作一个单元进行操作。例如，当页面离开编辑模式时应该删除所有的绑定，可以利用如下代码来实现：
$('*').unbind('click.editMode');
语法：eventTypeName(listener)
功能：建立已指定的函数，作为与方法同名的事件类型的事件处理程序。支持的命令包括：
| blur |
focus |
mousedown |
resize |
| change |
keydown |
mousemove |
scroll |
| click |
keypress |
mouseout |
select |
| dblclick |
keyup |
mouseover |
submit |
| error |
load |
mouseup |
unload |
注意：当利用这些快捷方法时，无法指定要存储在event.data属性里的data值。
参数 listener：（函数）作为事件处理程序的函数。
返回：包装集。
语法：one(eventType, data, listener)
功能：在匹配集的所有元素上建立作为指定事件类型的事件处理程序的函数。一旦执行，处理程序就被自动删除。
参数 eventType：（字符串）为将要建立的处理程序指定事件类型的名称。
参数 data：（对象）调用者提供的数据，作为名叫data的属性附加到Event实例，可供事件处理函数使用。如果省略，事件处理函数就被指定为下一个参数。
参数 listener：（函数）将被建立为事件处理程序的函数。
返回：包装集。
删除事件处理程序
语法：unbind(eventType, listener)、unbind(event)
功能：从包装集的所有元素中删除可选的已传递参数所指定的事件处理程序。如果不提供参数，则从元素中删除所有的监听器（即事件处理程序）。
参数 eventType：（字符串）如果提供，则说明只删除为指定的事件类型而建立的监听器。
参数 listener：（函数）如果提供，则标识将要删除的特定监听器。
参数 event：（事件）删除触发Event实例所描述事件的监听器。
返回：包装集。
通过提供初始化时作为监听器而建立的函数的引用，可以删除特定的监听器。要想使用这成为可能，函数的引用必须最初在绑定函数作为事件监听器时就保留。为此，初始化时作为监听器而建立的函数（最终作为处理程序将被删除），要么定义为顶层函数（以便可以通过顶层变量名称取得函数的引用），要么通过其他方式保留函数的引用。如果提供函数作为匿名的内联引用，则使得随后在unbind()调用中无法引用该函数。
Event实例
安全的Event实例属性
| 属性 |
描述 |
| altKey |
当触发事件时，如果Alt键已被按下，设置为true；否则设置为false。在多数Mac键盘上Alt键标注为Option。 |
| ctrlKey |
当触发事件时，如果Ctrl键已被按下，设置为true；否则设置为false。 |
| metaKey |
当触发事件时，如果Meta键已被按下，设置为true；否则设置为false。Meta键就是PC机上的Ctrl键或Mac机上的Command键。 |
| shiftKey |
当触发事件时，如果Shfit已被按下，设置为true；否则设置为false。 |
| keyCode |
对于keyup（键上）和keydown（键下）事件，返回被按下的键。请注意对于字母符号，不管用户输入的是大写还是小写字母，返回的都是字母的大写版本。可以用shiftKey属性来确定输入的是大写还是小写。对于keypress（按键）事件，请使用which属性，因为该属性在跨浏览器时依然是可靠的。 |
| which |
对于键盘事件，指定键盘触发事件的键的数字编码；对于鼠标事件，指定按下的是哪个鼠标键（1为左、2为中、3为右）。应该利用which属性而不是button属性，因为不能指望button属性以一致的方式跨越多种浏览器。 |
| data |
如果有值的话，就在建立处理程序时，作为第二个参数传递到bind()命令的值。 |
| pageX、pageY |
对于鼠标事件，指定事件的相对于页面原点的水平坐标和垂直坐标。 |
| screenX、screenY |
对于鼠标事件，指定事件的相对于屏幕原点的水平坐标和垂直坐标。 |
| type |
对于所有的事件，指定已触发的事件的类型（例如：click）。如果你利用单个事件处理函数来处理多个事件，这个属性就能派上用场。 |
| relatedTarget |
对于某些鼠标事件，标识触发事件时光标离开或进入的元素。 |
| target |
标识在哪个元素上事件被触发。 |
注意：keypress属性对于非字母符号在跨浏览器时是不可靠的。通过keypress事件的which属性可以获得可靠的、区分大小写的字符编码。通过keyup和keydown事件的which属性，只能获得不区分大小写的键编码，但可以通过检查shiftKey属性来确定大小写。
分享到：
相关推荐
1. **统一事件处理程序方法**：jQuery提供了统一的方式来绑定事件处理程序，无论浏览器如何实现，都可以使用相同的API，比如`bind()`、`on()`等。 2. **多事件处理器**：jQuery允许在单个元素上为同一种事件类型...
总的来说，jQuery 模型驱动插件是一种实用的前端开发工具，它通过简化数据绑定和事件处理，使开发者能够更加专注于业务逻辑的实现，从而提升开发效率和代码质量。通过了解并熟练使用此类插件，可以更好地应对现代 ...
jQuery库大大简化了这一过程，提供了丰富的API和方法来处理DOM（文档对象模型）中的事件。本篇文章将深入探讨jQuery事件处理及其相关示例，帮助你更好地理解和运用jQuery在实际项目中的功能。 ### 一、jQuery事件...
jquery多脑图总结大全
首先，我们要了解jQuery的事件系统是基于浏览器的事件模型构建的。默认情况下，jQuery提供了如click、mouseover等内置事件，但有时我们需要自定义一些特定业务场景的事件。例如，当用户完成一项复杂操作或者数据加载...
jQuery简化了DOM（文档对象模型）事件处理，使得在网页交互中添加、移除和触发事件变得更加简单。这份4页的PDF文档可能包含了丰富的实践示例和代码片段，旨在帮助开发者更深入地理解并熟练运用jQuery事件。 jQuery...
基于Flask+jQuery前后端分离部署pytorch模型案例源码.zip基于Flask+jQuery前后端分离部署pytorch模型案例源码.zip基于Flask+jQuery前后端分离部署pytorch模型案例源码.zip基于Flask+jQuery前后端分离部署pytorch模型...
在实现拖拽连接模型的过程中，我们需要监听jQuery-UI的`stop`事件，当拖放操作结束时，根据当前元素的位置和jsPlumb的端点规则创建新的连接。同时，jsPlumb的连接事件也可以用来更新拖放后的连接状态。通过结合两者...
1. 页面生命周期事件： - `pageinit`：当页面首次被加载或通过导航机制插入到DOM（文档对象模型）中时触发。这是初始化页面的最佳时机，因为所有数据和事件绑定都在这个阶段完成。 - `pageshow`：当页面在视口中...
本文将详细探讨如何使用jQuery实现当用户按下回车键时光标所在输入框外的其他地方触发一个按钮的点击事件。 首先，需要了解的是，当一个网页被加载时，它在浏览器中生成了一个文档对象模型（DOM），我们可以通过...
在jQuery中，事件模型是基于DOM级别的事件处理和模拟事件触发的一个重要部分。理解其默认行为执行顺序以及`trigger()`和`triggerHandler()`的区别对于优化和控制JavaScript代码的行为至关重要。 通常，浏览器在处理...
在jQuery中，`$(document).ready()` 是一个常见的方法，用于确保DOM（文档对象模型）完全加载后才执行脚本。在这个阶段，我们可以绑定事件监听器到元素上，例如： ```javascript $(document).ready(function() { /...
浏览器的事件模型 DOM第0级事件模型 1.Event实例 他的属性提供了关于当前正被处理的已触发事件的大量信息。这包括一些细节，比如在哪个元素上触发的事件、鼠标事件的坐标以及键盘事件中单击...jQuery事件模型 使用jQue