比如清单 3 所示的例子中，监听页面加载（load）事件的监听器 initPage 是通过 body 元素的 onload 属性来指定的。jQuery 提供了一种简便的方法来处理页面的 load 事件绑定。其方法就是使用 document 对象作为选择器传递给$函数。然后调用给函数返回值的 ready 方法。调用时将事件监听器函数作为 ready 方法的参数传入。因此，清单 3 所示例子中的页面 load 事件绑定可以用 jQuery 代码的方式实现，如下代码所示：

清单 11.使用 ready 方法处理页面 load 事件

$(document).ready(initPage);//页面加载完毕后，jQuery 会回调 initPage

页面 load 事件的绑定也可以直接将事件监听器函数作为 $ 函数的参数直接对该函数进行调用。此时，$ 函数会在页面加载完毕（即 HTML 文档及相关资源文件，如 CSS、图片和 JavaScript 文件，加载完毕后触发）后，回调这个事件监听器。因此，上述代码也可以写作：

清单 12.直接将函数传递给$函数处理页面 load 事件

$(initPage);

通常，这样的事件监听器可以写成匿名函数。如下代码所示：

清单 13.使用匿名函数

$(function(){//该函数在页面加载完毕会被 jQuery 调用 //事件处理代码 });

其它选择器

jQuery 还支持其它类型的选择器，如基于伪类的选择器、基于元素层次关系的选择器等。有关选择器的进一步信息，您可以参考 jQuery 的 API 文档：。

jQuery 的架构：支持插件机制

jQuery 支持提供插件的方式扩展其功能。从这个角度来将，当我们提到 jQuery 时，默认就是指 jQuery 内核(Core)，它是由 jQuery 官方组织所开发和维护的。而使用者则可以根据需要开发一些插件。本教程后面会介绍一些常用 jQuery UI 插件，以及如何自定义一个插件。

jQuery 事件:轻松实现跨浏览器的事件处理

bind 方法可以实现事件监听器的绑定。下面看一个具体的例子。这个例子实现这样一个功能：

按钮被单击后，其下方会显示或者隐藏一段文本。

清单 14.使用 bind 方法绑定事件监听器

//当 ID 为 btnDetails 的按钮被单击时，下面的匿名函数会被 jQuery 调用 $("#btnDetails").bind("click",function(){ $("#divDetails").toggle();//显示或者隐藏 ID 为 divDetails 的元素 });

从上述的例子（在线例子：?code=EvtBinding.htm）中可以看出。当选择器所匹配的元素被单击时， bind 方法的第二个参数所指定的函数会被 jQuery 调用。而负责显示/隐藏 divDetails 块的代码就会随着其所在的函数被调用而被执行，从而实现了预期的页面效果。

bind 方法的语法是：

event ：要处理的事件的名称。该名称不需要加前缀 on。

handler ：事件监听器，即对浏览器事件进行处理的函数。这通常是一个匿名函数。在 event 参数所表示的事件被触发后，jQuery 会调用这个函数（即回调），并向该函数传入一个 jQuery 自定义的事件对象。该事件对象是 jQuery 根据原始的浏览器事件对象创建的。jQuery 这么做是通过一个"中立"的事件对象来规避不同的浏览器所提供的同一个事件的事件对象的属性不同的问题。这使得我们可以用同样的代码处理事件，而不必关心不同浏览器所提供的原始事件对象的差异。

data ：表示需要在事件触发后传递给事件监听器的额外数据。它是作为 jQuery 事件对象的 data 属性传递给事件监听器的。

下面看具体的例子。

使用 jQuery 事件对象

对某些事件的处理，我们可能需要从事件对象中获取当前事件的进一步信息。

假设页面上有个输入框只允许输入数字。当用户输入的字符为非数字字符时，页面能够自动将其"过滤"掉，即在输入框中不显示这些无效的字符。实现这样的功能就需要从表示用户输入的 keypress 事件对象中获取用户当前所按的键的键盘编码值，以便找出相应的字符。代码如清单 15 所示：

清单 15.使用 jQuery 事件对象

$("#txtVerifyCode").bind("keypress",function(evt){ var keyCode=evt.which;//从事件对象中获取当前按键的编码值 var char=String.fromCharCode(keyCode) ;//将按键的编码转换为相应的字符 if(!/\d/.test(char)){//当前输入的字符不是数字字符 //调用事件对象的 preventDefault 方法，取消事件的默认行为，此处即取消输入。 evt.preventDefault(); } });

从上面的例子（在线例子：?code=JqEvtObj.htm）可以看出，具体是什么按键触发了 keypress 事件的信息可以从 jQuery 封装的 jQuery 对象的相应属性 keyCode 中获取。而 jQuery 在调用我们的事件监听器时会将其封装的事件对象作为唯一参数传递给事件监听器。

向事件监听器传递额外参数

下面看一个向监听器传递额外参数的例子。

假设现在有个能够在页面中显示提示信息的函数，其定义如下：

function showTip(msg){ $('#divTips').html(msg);//显示具体的提示内容 }

页面上有两个按钮，它们被单击的时候页面上分别会显示不同的提示信息。那么，我们可以编写如下的事件监听器：

清单 16.从事件对象中获取额外数据

function showTipHandler(evt){ var data=evt.data;//获取额外参数 /*额外参数是一个我们根据需要的自定义对象。这里，我们假设这个对象有个 msg 属性。 它表示希望要显示的提示信息。 */ var msg=data.msg; showTip(msg); }

那么，我们就可以在事件绑定的时候，使用上面定义的事件监听器。并定义其额外参数。代码如下：

清单 17.向事件监听器传递额外数据

$('#tip1').bind('click',{msg:'中文提示'},showTipHandler); $('#tip2').bind('click',{msg:'English tip'},showTipHandler);

从上面的例子（在线例子：?code=EvtObjExtraData.htm）可以看出，在调用 bind 方法绑定事件监听器时指定的额外数据（即 bind 方法的第 2 个参数）可以被事件监听器通过访问事件对象的 data 属性来获取。这个特性在使用统一个事件监听器出来多个元素的事件时显得很有用。

事件绑定的简便方法

通过 bind 方法实现事件绑定，需要我们在 bind 方法的第一个参数中指定具体的事件名。

jQuery 也提供一些简便的事件绑定方法。这些方法就以所要处理的事件名命名。

比如，清单 15 中的代码可以写成：

$("#txtVerifyCode").keypress(function(evt){ //这里是事件处理代码 });

取消事件绑定

如果要取消某个事件监听器。则可以使用 unbind 方法。

下面的例子演示了取消 ID 为 btnTest 的按钮上的事件监听器 handleClick 。代码如下:

清单 18.取消事件绑定