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属性来确定大小写。
分享到：
相关推荐
jQuery事件模型的功能有： 提供建立事件处理程序的统一方法； 允许在每个元素上为每个时间类型建立多个处理程序； 采用标准的事件类型名称，例如click或mouseover； 使用Event实例可用作处理程序的参数； 对Event...
适用于ajax请求回来的对象数据，向页面的字段里面赋值， 此插件可以一键操作，自己美其名曰“模型驱动”谢谢大家，随时吐槽拍砖
jquery多脑图总结大全
基于Flask+jQuery前后端分离部署pytorch模型案例源码.zip基于Flask+jQuery前后端分离部署pytorch模型案例源码.zip基于Flask+jQuery前后端分离部署pytorch模型案例源码.zip基于Flask+jQuery前后端分离部署pytorch模型...
本文实例讲述了jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较。分享给大家供大家参考，具体如下： 前言： 最近在工作中做需求时发现了一个诡异的事情，在使用jQuery触发事件时，并不总是先...
利用jQuery-UI和jsPlumb实现拖拽连接模型
第一课：jQuery选择符 第二课：操作包装集元素 第三课：修改元素属性及内容 第四课：jQuery事件模型 第五课：Ajax 第六课：实现一个Ajax的TreeView 第七课：扩展jQuery
浏览器的事件模型 DOM第0级事件模型 1.Event实例 他的属性提供了关于当前正被处理的已触发事件的大量信息。这包括一些细节，比如在哪个元素上触发的事件、鼠标事件的坐标以及键盘事件中单击...jQuery事件模型 使用jQue
第9章 jQuery中的事件处理 第10章 jQuery中的动画与效果 第11章 jQuery与AJAX 第12章 回头重看jQuery——核心及工具 第13章 jQuery增强用户体验 第14章 jQuery中使用AJAX跨域操作 第15章 jQuery+PHP动态网站实践 第...
最简单的投票模型 基于JQuery jsp实现.rar 最简单的投票模型 基于JQuery jsp实现.rar 最简单的投票模型 基于JQuery jsp实现.rar 最简单的投票模型 基于JQuery jsp实现.rar
jQuery事件的链式写法 控制jQuery对象 jQuery控制CSS样式 第2章 使用JavaScript实现隔行变色 使用jQuery选择器实现隔行变色 JavaScript代码检测页面元素 jQuery代码检测页面元素 使用jQuery基本选择器 使用...