第一百四十章 进来出去

上一章,最后我们讲到了鼠标移动的事件。鼠标,我告诉你,你别动,你一动就是事儿!

但一般情况下,它动不动和我们关系不大,说直白了就是你爱怎么动怎么动,不碍着我就行了。那什么情况下会碍着我呢?

把鼠标放在某一个元素上,或者它没在某个元素上,这个事我们可能会关注。但是事件是时间点,不是一个持续的状态。所以事实上我们关注的是,鼠标,进入或者离开某个元素那个瞬间。也就是它在或者不在某一个元素之上,这个状态发生改变的时候。

这样讲道理总是让人迷糊,所以我们很不讲道理的去描述一下这个事件的发生,啊不,是这一系列事件的发生。

现在页面中有一个元素,我把鼠标移动到它上面。在鼠标移入这个元素的一瞬间,发生了两个事件。一个事件是:鼠标说,啊,我进来了(mouseenter)!另一个事件是:鼠标说,啊,我在你上面了(mouseover)!

……总觉得哪里怪怪的,不管了,继续学习新知识。

然后我把鼠标从元素上移开,又发生了两个事件。一个事件是:鼠标说,啊,我离开了(mouseleave)!另一个事件是:鼠标说,啊,我出去了(mouseout)!

我应该没写错,嗯,确认没写错。(所以你们在交头接耳些什么……

进来(mouseenter)和离开(mouseleave)是一对事件。在上面(mouseover)和出去了(mouseout)是另外一对事件。我知道,你们在想,进来和出去居然不是一对儿,搞这么复杂,记不住啊!那就告诉你们一个简单的分辨方法:长的和长的是一对儿,短的和短的是一对儿,这样就能够记住了。

那么明明只有一个事,就是鼠标进入这个元素和离开这个元素,好吧,这是一对儿事件。但问题是我们这里有两对儿。原因也很简单,进入(mouseenter)和离开(mouseleave)不支持冒泡,而在上面(mouseover)和出去了(mouseout)则支持冒泡。这个知识我也记不住,反正每次用的时候试一下就好了。(我好懒,懒得去记……

用起来也和前面差不多,也可以用代码去触发这些事件,但是鼠标并不会因此真的移动。

有没有觉得这些效果似曾相识?对,就是 CSS 里面的 hover。这个我们这里也有,而且也挺类似的。

hover 事件相当于 mouseenter 和 mouseleave 的联合。hover 后面的小括号里可以写两个函数(中间用逗号分隔),分别在鼠标进入和鼠标离开的时候执行。其实就是让我们在某些情况下可以把代码写得更简单一点。

如果在他后面的小括号中只给了一个函数,则会在鼠标进入和离开的时候都执行这个函数。

这个事件不支持用程序触发(只是不能直接用 hover 触发),因为他也不知道你究竟想触发哪一种事件。但是可以用 mouseenter 和 mouseleave 去间接的触发。

啊,东西有点多,记不住。那就记得这么复杂的玩意儿,如果支持冒泡,就一塌糊涂了。所以它所对应的那两个事件是不支持冒泡的那两个。

还有什么不懂的?不懂就自己设计实验去验证一下吧~

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第一百四十章 进来出去

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏