js中鼠标事件mouseover、mouseenter和mouseleave、mouseout的区别

我会带着你远行 2022-10-15 10:55 373阅读 0赞

> mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是mouseout
> 
> mouseenter:当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave

# **异同体现在两个方面：** #

> 1. 是否支持冒泡
> 
> 2.事件的触发时机

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phY2tpZURZSA_size_16_color_FFFFFF_t_70][]

##  mouseenter事件的情况 ##

>  当鼠标从元素的边界之外移入元素的边界之内时，事件被触发。而鼠标本身在元素边界内时，要触发该事件，必须先将鼠标移出元素边界外，再次移入才能触发。
> 
> 也就是说：mouseover支持事件冒泡，而mouseenter不支持事件冒泡
> 
> 由于mouseenter不支持事件冒泡，导致在一个元素的子元素上进入或离开的时候会触发其mouseover和mouseout事件，但不会触发mouseenter和mouseleave事件。

## **如何模拟mouseenter事件** ##

> 可见mouseover事件因其具有冒泡的性质，在子元素内移动的时候，频繁被触发，如果我们不希望如此，可以使用mouseenter事件代替之，但是早期只有ie浏览器支持该事件，虽然现在大多数高级浏览器都支持了mouseenter事件，但是难免会有些兼容问题，所以如果可以自己手动模拟，那就太好了。

> mouseenter：当鼠标移入某元素时触发。
> 
> mouseleave：当鼠标移出某元素时触发。
> 
> mouseover：当鼠标移入某元素时触发，移入和移出其子元素时也会触发。
> 
> mouseout：当鼠标移出某元素时触发，移入和移出其子元素时也会触发。
> 
> mousemove：鼠标在某元素上移动时触发，即使在其子元素上也会触发。
> 
> mouseout、mouseover和mouseleave、mouseenter最大的区别，在于子元素连带触发。

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
        .a{
          width: 500px;
          height: 500px;
          background: aliceblue;
        }
        .b{
          width: 200px;
          height: 200px;
          background: beige;
        }
        .c{
          width: 100px;
          height: 100px;
          background: violet;
        }
        </style>
    </head>
    <body>
        <div class="a">A
          <div class="b"
            onmouseenter="mouseenter()"
            onmouseleave="mouseleave()"
            onmouseout="mouseout()"
            onmouseover="mouseover()"
            onmousemove="mousemove()">B
            <div class="c">C
            </div>
          </div>
        </div>
        <script>
          function mouseenter(){
            console.log('mouseenter')
          }
          function mouseleave(){
            console.log('mouseleave')
          }
          function mouseout(){
            console.log('mouseout')
          }
          function mouseover(){
            console.log('mouseover')
          }
          function mousemove(){
            console.log('mousemove')
          }
        </script>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phY2tpZURZSA_size_16_color_FFFFFF_t_70 1][]

> 从A元素到C元素，再从C回到A，控制台输出如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phY2tpZURZSA_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phY2tpZURZSA_size_16_color_FFFFFF_t_70]: /images/20221014/020d0266a54443b799d715c40b85d71b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phY2tpZURZSA_size_16_color_FFFFFF_t_70 1]: /images/20221014/c2d40bf96b3a41acb985e598c221891e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phY2tpZURZSA_size_16_color_FFFFFF_t_70 2]: /images/20221014/a069c465e21e41cfbd5ea804ad3d4009.png