jQuery的事件模式(翻译jQuery in action第四章6)

来源：互联网发布：appletv如何安装软件编辑：程序博客网时间：2024/09/21 08:57

4．2．6 jQuery交互事件

在RIA页面开发的时候，经常会需要很多交互的事件，也就是很多事件的组合使用。jQuery给我们提供了了这样一组函数，让我们在开发交互事件的时候更加容易。有两个函数，我们逐步认识他们：

toggle（listnerOdd，listnerEven）；

这个函数的作用就是触发被选中元素的click事件，但是该事件绑定的函数就是参数中两个，间歇使用。什么意思呢？就是活第一次click的时候执行listnerOdd，第二次click的时候就是listnerEven，第三次又执行listnerOdd。

参数：listnerOdd（Function）奇数次点击的时候调用的函数；

参数：listnerEven（Function）偶数次点击的时候调用的函数。

返回：jQuery数组对象

下边看这个例子，就明白这个函数的原理了：

<html>

<head>

<title>jQuery Toggle Command Example</title>

src="../scripts/jquery-1.2.1.js">

</script>

$(function(){

$('#vstar').toggle(

function(event) {

$(event.target)

.css('opacity',0.4);

function(event) {

$(event.target)

.css('opacity',1.0);

}

);

});

</script>

</head>

<body>

</body>

</html>

在这个例子中，奇数次数点击图片的时候，图片的透明度变成0.4，偶数点击的时候不透明，toggle函数已经封装了，是奇数点击次数还是偶数点击次数，也不要考虑是什么浏览器，是不是用起来很简单啊^_^。

我们已经完成了图片半透和透明之间切换的效果，如果要切换元素的状态也就这样操作了。只是让他的disable和enable之间切换就成了，在RIA开发的时候，还会遇见另外一种事件交互方式，就是鼠标的over和out，jQuery还为我们提供了一个函数hover就是解决这个问题的。

Hover（overListner，outListner）；

参数：overListner（Function）mouseover事件执行的函数

参数：outListner（Function）mouseout事件执行的函数

返回：jQuery数组对象

定义鼠标指针在选中元素区域之上执行的函数和移出执行的函数。如果没有这个函数，我们要在一个刚才的那个图片上加上这两个事件，就应该这样定义：

$('#vstar').bind(‘mouseover mouseout’,report);

function report(event){

$(document.body).append('<div>'+event.type+'</div>');

}

原文中有很多的落锁的东西，我也翻译的不是很地道就省略了，我们的目的就是把问题讲清楚，上边的这个代码应该很容易理解。

现在我们用hover定义一下就明白了，

$('#vstar').hover（report，report）；这样就和上边的效果一样，是不是简单多了。现在可以回味一下，实际上任何一个框架或者是语言的基础库都是有限的，只是做了不同的封装，这样就要求我们要经常看api了。