摘要：定义在鼠标光标从元素外部首次移动到元素范围之内时触发，这个事件不冒泡。又移入的另一个元素可能位于前一个元素的外部，也可能是该元素的子元素。
前言
我们都知道js提供了鼠标事件，而鼠标事件中包含了两对事件，即mouseover和mouseout以及mouseenter和mouseleave这两对事件，如果只是单纯的读红宝书上的文字可能体会不到他们的差别，现在我们就用实例来证明一下这个两组事件的差别。定义 mouseenter
在鼠标光标从元素外部首次移动到元素范围之内时触发，这个事件不冒泡。
mouseleave在位于元素上方的鼠标光标移动到元素范围之外时触发，这个事件不冒泡。
mouseover在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。
mouseout在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部，也可能是该元素的子元素。
实例先放上整段代码，可以参考一下：
父元素
子元素
操作的动图是这样的：（括号中数字是表示触发的次数）
第一步：鼠标进入父元素，同时触发mouseenter（1）和mouseover（1）
第二步：鼠标进入子元素，同时触发mouseover（2）和mouseout（1）
第三步：鼠标离开子元素，同时触发mouseout（2）和mouseover（3）
第四步：鼠标离开父元素，同时触发mouseout（3）和mouseleave（1）
总结根据上面的操作，我们可以总结出以下结论：
mouseenter和mouseleave只有离开该元素时才会触发，如果有子元素的话，鼠标移入子元素，还算是在该元素中，所以不会触发；
mouseover和mouseout是只要有进入和离开就会出触发，无论是从父元素到子元素还是子元素到父元素，或者是只对父元素进行操作（换句话说，会触发mouseenter和mouseleave的时候一定会触发mouseover和mouseout）
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/100524.html
摘要：而当鼠标本身在元素边界内时，要触发该事件，必须先将鼠标移出元素边界外，再次移入才能触发。造成以上现象本质上是事件不支持冒泡所致。事件属性返回与事件的目标节点相关的节点。我们通过排查和，最后只留下，也就是与事件一起触发的时机。 前言 原文地址 项目地址 不知道大家在面试或者工作过程中有没有被mouseover和mouseenter(对应的是mouseout和mouseleave)事件所困...
摘要：而当鼠标本身在元素边界内时，要触发该事件，必须先将鼠标移出元素边界外，再次移入才能触发。造成以上现象本质上是事件不支持冒泡所致。事件属性返回与事件的目标节点相关的节点。我们通过排查和，最后只留下，也就是与事件一起触发的时机。 前言 原文地址 项目地址 不知道大家在面试或者工作过程中有没有被mouseover和mouseenter(对应的是mouseout和mouseleave)事件所困...
摘要：可以传递三个参数表示一个或多个事件类型，比如。表示绑定到指定元素的处理函数。我们称它为简写事件。必须在中，并且使用作为事件触发元素，不然无效。和表示鼠标移入和移出的时候触发。按下返回按下返回和分别表示光标激活和丢失，事件触发时机是当前元素。 转自个人博客 在JavaScript 有一个非常重要的功能，就是事件驱动。如果你的网页需要与用户进行交互的话，就不可能不用到事件。它在页面完全加...
jQuery 鼠标事件 click与dbclick事件 用交互操作中，最简单直接的操作就是点击操作。jQuery提供了两个方法一个是click方法用于监听用户单击操作，另一个方法是dbclick方法用于监听用户双击操作。这两个方法的用法是类似的，下面以click()事件为例 方法一：$ele.click() 绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少 点击触发 $(ele...
阅读 3806·2021-11-24 09:39
阅读 1815·2021-11-02 14:41
阅读 816·2019-08-30 15:53
阅读 3482·2019-08-29 12:43
阅读 1190·2019-08-29 12:31
阅读 3090·2019-08-26 13:50
阅读 798·2019-08-26 13:45
阅读 990·2019-08-26 10:56
