上一章，最后我们讲到了鼠标移动的事件。鼠标，我告诉你，你别动，你一动就是事儿！
但一般情况下，它动不动和我们关系不大，说直白了就是你爱怎么动怎么动，不碍着我就行了。那什么情况下会碍着我呢？
把鼠标放在某一个元素上，或者它没在某个元素上，这个事我们可能会关注。但是事件是时间点，不是一个持续的状态。所以事实上我们关注的是，鼠标，进入或者离开某个元素那个瞬间。也就是它在或者不在某一个元素之上，这个状态发生改变的时候。
这样讲道理总是让人迷糊，所以我们很不讲道理的去描述一下这个事件的发生，啊不，是这一系列事件的发生。
现在页面中有一个元素，我把鼠标移动到它上面。在鼠标移入这个元素的一瞬间，发生了两个事件。一个事件是：鼠标说，啊，我进来了（mouseenter）！另一个事件是：鼠标说，啊，我在你上面了（mouseover）！
……总觉得哪里怪怪的，不管了，继续学习新知识。
然后我把鼠标从元素上移开，又发生了两个事件。一个事件是：鼠标说，啊，我离开了（mouseleave）！另一个事件是：鼠标说，啊，我出去了（mouseout）！
我应该没写错，嗯，确认没写错。（所以你们在交头接耳些什么……
进来（mouseenter）和离开（mouseleave）是一对事件。在上面（mouseover）和出去了（mouseout）是另外一对事件。我知道，你们在想，进来和出去居然不是一对儿，搞这么复杂，记不住啊！那就告诉你们一个简单的分辨方法：长的和长的是一对儿，短的和短的是一对儿，这样就能够记住了。
那么明明只有一个事，就是鼠标进入这个元素和离开这个元素，好吧，这是一对儿事件。但问题是我们这里有两对儿。原因也很简单，进入（mouseenter）和离开（mouseleave）不支持冒泡，而在上面（mouseover）和出去了（mouseout）则支持冒泡。这个知识我也记不住，反正每次用的时候试一下就好了。（我好懒，懒得去记……
用起来也和前面差不多，也可以用代码去触发这些事件，但是鼠标并不会因此真的移动。
有没有觉得这些效果似曾相识？对，就是 CSS 里面的 hover。这个我们这里也有，而且也挺类似的。
hover 事件相当于 mouseenter 和 mouseleave 的联合。hover 后面的小括号里可以写两个函数（中间用逗号分隔），分别在鼠标进入和鼠标离开的时候执行。其实就是让我们在某些情况下可以把代码写得更简单一点。
如果在他后面的小括号中只给了一个函数，则会在鼠标进入和离开的时候都执行这个函数。
这个事件不支持用程序触发（只是不能直接用 hover 触发），因为他也不知道你究竟想触发哪一种事件。但是可以用 mouseenter 和 mouseleave 去间接的触发。
啊，东西有点多，记不住。那就记得这么复杂的玩意儿，如果支持冒泡，就一塌糊涂了。所以它所对应的那两个事件是不支持冒泡的那两个。
还有什么不懂的？不懂就自己设计实验去验证一下吧~
暂无评论内容