jQuery-mouseover与mouseenter事件

 

学习的时候，对mouseover-mouseout与mouseenter-mouseleave这两组事件的区别，看到的解释是：

前一组穿过子元素会触发，而后一组不会。

 

对这句话的意思不是很了解，于是想到写一个例子看看。

该例子在鼠标经过div时变换子元素p的背景色，通过后换回原来的颜色，如下：

布局代码：

此外还有一个<strong/>兄弟节点

 

仔细观察两个方法组的效果区别，然而并没有看出有什么不同。

 

到网上一查，得到了启发。

使用了另一个例子：

目的是查看同样情况下，方法的调用次数。

代码如下：

效果：

 

这才体会到前述的，mouseenter与mouseover的区别。

 

比较两个例子，显然第二个才直观。

初涉前端，我这才清晰体会到事件的含义，明白它很重要的一个概念：触发条件。

mouseenter与mouseover的区别，更细致的说，前者只要进入指定触发元素，在离开前都只触发一次，相当于子元素与该元素被视为一体的；

后者，从鼠标进入指定元素触发一次，期间遇到它的子元素再视为触发条件触发一次，从子元素离开遇到父元素也会触发。

 

其实这次得到最大的经验是：比较两个相似事件的不同时，最好能通过例子查看它们被触发的次数。

一个好的的例子，才是学习的利器。