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>
<script type="text/javascript"
src="../scripts/jquery-1.2.1.js">
</script>
<script type="text/javascript">
$(function(){
$('#vstar').toggle(
function(event) {
$(event.target)
.css('opacity',0.4);
},
function(event) {
$(event.target)
.css('opacity',1.0);
}
);
});
</script>
</head>
<body>
<img id="vstar" src="vstar.jpg"/>
</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 了。
扫一扫
152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
