jQuery 的 hover 方法等同于 mouseenter + mouseleave 方法

文章来源: http://www.36ria.com/1756

jQuery中的hover方法是个非常常用的方法，接受二个参数，第一个参数为鼠标移入对象时触发的事件，第二个参数为鼠标移出对象时触发的事件。

很多人误以为hover()是mouserover和mouseout的结合体，实际上不是。

hover =  mouseenter+mouseleave

mouseenter和mouseleave这二个事件，jquery新手应该会觉得很陌生，实际上它实现的功能和mouserover和mouseout是极为类似的，那为什么会出现这二个事件，而不使用mouserover和mouseout呢？

这就要从mouseout的诡异bug说起了，mouseout会在你离开子元素的时候就把事件冒泡到父元素上，也就是说不管你的鼠标是否还在父元素中，只要你一离开子元素，就会触发mouseout。

这说法非常的抽象，来看demo：

http://www.36ria.com/demo/hover/demo.html

尤其看下第三个关于mouseout的示例，你就会发现这个问题的所在。

例子的代码非常简单，这里就不再累述，重点说明下最后一个例子的写法：

$('.selectorClass4').hover(function(){       

　　this.check = this.check || 1;       

　　$(this).stop().fadeTo('slow',this.check++%2==0 ? 1 : 0.4); 

});

留意了，这里的hover只有一个参数，也就是只有移入事件，但同样实现了移入和移出。那是如何实现的呢？
非常关键的一个属性：this.check
大家可以使用alert(this.check )试下，非常有意思，奇数为移入，而偶数为移出，但注意第一次移入为undefined，所以才需要this.check = this.check || 1;当this.check不存在时赋值1

转载于:https://www.cnblogs.com/caly/archive/2011/12/28/2304533.html

扫描二维码关注公众号，回复： 6684917 查看本文章