5.4.2　jQuery事件

jQuery也提供了事件来处理两个非常常见的交互性问题：鼠标光标移动到某物之上并随后移开，以及单击的时候两个操作的切换。

hover（）事件

mouseover事件和mouseout事件通常一起使用。例如，当把鼠标光标移动到一个按钮上时可能出现一个菜单；当把鼠标光标从按钮上移开，菜单消失。由于成对的这两个事件如此常见，因此jQuery提供了引用这两个事件的一种快捷方式。jQuery的hover（）函数的工作和其他事件一样，只不过它不是接收一个函数作为参数，而是接收两个函数作为参数。当鼠标光标移动到元素上时，第一个函数运行；当鼠标光标从元素上移开时，第二个函数执行。其基本结构如下所示：

$（'#selector'）.hover（function1，function2）；

我们经常看到hover（）函数和两个匿名函数一起使用。这类代码看上去有些怪异，下面的示例将澄清它。假设当某人把鼠标光标移动到一个ID为菜单的链接上，我们希望一个（当前不可见的）ID为子菜单的DIV显示。当鼠标光标从链接上移开，子菜单再次隐藏。可以使用hover（）来做到这点：

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

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

}，function（）{

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

}）；//end hover

为了让包含多个匿名函数的一条语句容易阅读，可以把每个函数移到单独的一行。这样，上述代码的一个可读性更好的版本如下所示：

$（'#menu'）.hover（

function（）{

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

}，//end mouseover

function（）{

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

}//end mouseout

）；//end hover

图5-4展示了这段代码如何用于mouseover和mouseout事件。

图　5-4　jQuery的hover（）函数允许一次指定两个函数。当鼠标光标移动到元素上的时候，第一个函数运行，而当鼠标光标从元素上移开的时候，第二个函数运行

如果匿名函数的方法太容易令人混淆，仍然可以使用普通的函数（参见3.4节）来完成任务。首先，创建一个命名的函数，当mouseover事件触发的时候运行它；为mouseout事件创建另一个具有名字的函数，把两个函数的名字传递给hover（）函数。换句话说，可以把上面的代码重新编写为如下的形式：

function showSubmenu（）{

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

}

function hideSubmenu（）{

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

}

$（'#menu'）.hover（showSubmenu, hideSubmenu）；

如果你觉得这一技术很容易，那就使用它。二者之间没有真的区别，一些程序员喜欢通过使用匿名函数把所有的代码放在一条语句中，而不是把代码分散在几条不同的语句中。

toggle（）事件

jQuery的toggle（）事件的作用和hover（）事件相同，只不过它不是响应mouseover和mouseout事件，而是响应click事件。一次单击触发第一个函数，下一次单击触发第二个函数。当想要使用单击来在两种状态之间交替的时候，使用这个事件。例如，可以让页面上的一个元素在第一次单击的时候出现，而在下一次单击的时候消失。再次单击的话，元素重新出现。

例如，假设当第一次单击链接的时候，想要让submenu＜div＞（来自上面的hover（）示例）显示，然后，当下一次单击链接的时候消失。只要像下面这样，把“hover”换成“toggle”就行了：

$（'#menu'）.toggle（

function（）{

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

}，//end first click

function（）{

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

}//end second click

）；//end toggle

或者，使用带有名字的函数，例如：

function showSubmenu（）{

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

}

function hideSubmenu（）{

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

}

$（'#menu'）.toggle（showSubmenu, hideSubmenu）；

toggle（）函数可以接收两个以上的函数作为参数：例如，如果想要在第一次单击的时候发生一件事情，在第二次单击的时候发生另一件事情，在第三次单击的时候发生第三件事情。传递给toggle（）的每个函数都将响应自己所对应的单击。例如，第一个函数在第一次单击的时候运行，第二个函数在第二次单击的时候运行，第三个函数在第三次单击的时候运行，以此类推。一旦jQuery执行完所有的函数，在下一次单击的时候，它返回到第一个函数（例如，如果向toggle（）传递3个函数，那么，在第四次单击的时候，将会再次运行第一个函数）。