mouseenter 和 mouseleave事件总结学习

现在除IE系列支持mouseenter 和 mouseleave事件外,opera11+ 、firefox10+也支持mouseenter 和 mouseleave事件,同时它们也成为w3c DOM3 Event的规范,司徒正美的框架中有比较详细的说明哈。

话说这两个事件之前也遇到过,只是没太在意,至今别人提起的时候,才觉得这两个事件的重要性,身为Web前端开发人员,表示惭愧。

一般都是拿这两个事件和 mouseover、mouseout事件进行比较,两者最大的区别就是 mouseenter/mouseleave 不冒泡的事件,那么两者的这种不同之处的具体表现是什么? 请观看下方Demo:

http://static.crossyou.cn/study/mouseenter-mouseleave-event.html

截图说明:

上图所示:为红A所处的div添加mouseenter 和 mouseleave事件,那么当鼠标从A的外面移入到B内部的过程中将会依次触发:

1、mouseenter事件

当鼠标从B内部移动到A外部区域的过程中将会依次触发:

1、mouseleave事件

上图所示:为红C所处的div添加mouseover和 mouseout事件,那么当鼠标从C的外部移入到D内部的过程中将会依次触发:

1、mouseover事件

2、mouseout事件

3、mouseover事件

而当鼠标从D内部移动到C外部区域的过程中则将会依次触发:

1、mouseout事件

2、mouseover事件

3、mouseout事件

可以看到mouseover和mouseout事件冒泡了,而mouseenter和mouseleave事件则没有冒泡。

这篇文章目前没有评论

Leave a Reply

(必填项)

(必填项)

(可选)