5.2　以jQuery的方式使用事件

以传统方式，对事件编程需要些技巧。很长一段时间以来，Internet Explorer以和其他浏览器完全不同的方式来处理事件，因此，需要两套代码（分别针对IE和所有其他的浏览器）才能让代码工作。好在，IE 9现在使用和其他浏览器相同的方法来处理事件，因此，编程变得容易多了。然而，还是有很多人使用IE 8或更早的版本，因此，针对事件编程仍然需要一种容易的、跨浏览器兼容的解决方案。幸运的是我们有jQuery。

正如在第4章中所学到的，像jQuery这样的JavaScript库通过JavaScript编程解决了很多问题，包括令人烦恼的浏览器不兼容问题。此外，库通常简化和JavaScript相关的基本任务。jQuery使得指定事件和事件辅助函数（处理事件的函数）变得很简单。下面是一个基本过程：

正如4.4节所提到的，jQuery编程涉及：a）选择一个页面元素；b）对该元素做些事情。实际上，由于事件对于JavaScript编程来说是不可或缺的，因此最好把jQuery编程考虑成一个包含3个步骤的过程：

1.选择一个或多个元素。

第4章介绍了为什么jQuery允许使用CSS选择器来选择想要操作的页面部分。当分配事件的时候，我们希望选择访问者将要与其交互的元素。例如，一个访问者将会单击的是一个链接、一个表格或还是一幅图像？如果想要分配一个mouseover事件，访问者的鼠标光标停留在什么页面元素上会触发操作？

2.分配一个事件。

在jQuery中，大多数DOM事件有一个对等的jQurey函数。因此，要把事件分配给一个元素，只需要添加一个点号、事件的名称然后是一对圆括号。例如，如果想要给页面上的每个链接添加一个mouseover事件，可以这样做：

$（'a'）.mouseover（）；

要对ID为menu的一个元素添加一个click事件，可以这样编写：

$（'#menu'）.click（）；

我们可以使用5.1.1节到5.1.4节列出的任何事件名称（以及5.4.2节所讨论的只用于jQuery的事件）。

在添加了事件之后，还有一些工作可以做。为了让事件触发时有一些事情发生，必须为事件提供一个函数。

3.给事件传递一个函数。

最后，需要定义当事件触发的时候发生什么。为了做到这一点，可以把一个函数传递给事件。函数包含了在事件触发的时候将要运行的命令：例如，使得一个隐藏的＜div＞标签可见或者突出显示一个鼠标光标停留其上的元素。可以传递之前定义的函数的名字，如下所示：

$（'#start'）.click（startSlideShow）；

当给事件分配一个函数的时候，省略了调用函数的时候通常放在函数名后面的（）。换句话说，如下的方式是无效的：

$（'#start'）.click（startSlideShow（））

然而，给事件分配一个函数最常用的方法是给事件传递一个匿名函数。4.10.1节已经介绍了匿名函数，它们通常是没有名字的一个函数。匿名函数的基本结构如下所示：

function（）{

//your code here

}

通过一个事件使用匿名函数的基本结构如图5-2所示。

注意：要学习有关如何使用jQurey和事件的更多知识，请访问http：//api.jquery.com/category/Events。

下面是一个简单的例子。假设有一个Web页面，其中带有ID为菜单的一个链接。当访问者把鼠标光标移到这个链接上的时候，我们希望其他链接的一个隐藏的列表显示出来，假设这个链接列表的ID为submenu。因此，我们希望做的是为菜单添加一个mouseover事件，然后调用一个函数来显示子菜单。这个过程分解为4个步骤：

图　5-2　在jQuery中，事件像函数一样工作，因此，可以给事件传递一个参数。可以把匿名函数只看做一个参数，即传递给一个函数的一段数据。如果按照这种方式来思考，很容易理解所有这些标点符号是如何组合起来的。例如，在最后一行中，}表示函数的结束（也是传递给mouseover函数的参数的结束）；而）是mouseover（）函数的结束；而分号则是以选择器$（'a'）开始的整条语句的结束

1.选择菜单：

$（'#menu'）

2.附加事件：

$（'#menu'）.mouseover（）；

3.添加匿名函数：

$（'#menu'）.mouseover（function（）{

}）；//end mouseover

后面会经常遇到这样的组合：结束的花括号、结束的圆括号和分号（}）；），在一个函数调用中，这通常标志着一个匿名函数结束了。由于这种组合随处可见，为其添加一个JavaScript注释是一种好办法。在这个示例中，//end mouseover指明了这组符号的含义。

4.添加必要的操作（在这个例子中，就是显示submenu）：

$（'#menu'）.mouseover（function（）{

$（'#submenu'）.show（）；

}）；//end mouseover

很多人发现匿名函数所涉及的混乱的标点符号嵌套很容易令人混淆（最后的}）；总是很奇怪）。这确实容易令人混淆，但是，熟悉JavaScript的奇怪世界的最佳方法就是通过多多实践，因此，下面的动手教程能够帮助你巩固刚刚学习的知识。

注意：show（）在本书6.1.1节介绍。