onmouseover 、onmouseout 与onmouseenter 、onmouseleave的区别

最新推荐文章于 2024-07-07 20:04:18 发布

原创最新推荐文章于 2024-07-07 20:04:18 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #前端

本文介绍HTML中鼠标事件onmouseenter、onmouseleave、onmouseover、onmouseout的区别与应用，并通过实例展示了如何利用这些事件来控制页面元素的样式变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

属性	描述
onmouseenter	当鼠标指针移动到元素上时触发。
onmouseleave	当鼠标指针移出元素时触发
onmouseover	鼠标移到某元素之上。
onmouseout	鼠标从某元素移开。

文档内容来自菜鸟教程

以下列嵌套容器为例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .external {
            width: 600px;
            height: 600px;
            background-color: red;
            margin: 0 auto;
        }

        .interval {
            width: 300px;
            height: 300px;
            background-color: black;
        }
    </style>
</head>
<body>
<div class="external">
    <div class="interval">
    </div>
</div>

<script type="text/javascript">
    let external = document.getElementsByClassName('external')[0]
    external.onmouseenter = function () {
      console.log('父-enter')
    }
    external.onmouseleave = function () {
      console.log('父-leave')
    }
    external.onmouseout = function () {
      console.log('父-out')
    }
    external.onmouseover = function () {
      console.log('父-over')
    }
</script>
</body>
</html>

所有事件都绑定到父元素中，它们之间的关系为：

onmouseenter、onmouseleave：鼠标只有在父元素与外界之间移入移出才会触发。即当第一次从外界移入父元素时触发onmouseenter事件，接着再移入子元素时不触发；从子元素中移除到父元素时也不触发onmouseleave事件，直到移出父元素到达外界才触发。
onmouseover、onmouseout：鼠标在父元素和子元素中都会触发。

图例：

根据这几个事件的特性，可实现以下功能，如图所示：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
    <style type="text/css">
        .external {
            width: 600px;
            height: auto;
            background-color: red;
            margin: 0 auto;
        }

        .external1 {
            background-color: #003cff;
        }

        .btn {
            float: right;
            margin: 10px;
            visibility: hidden;
        }

        .btn1 {
            visibility: visible;
        }

        .btn2 {
            background-color: #28c121;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
<div class="external">
    <button type="button" class="btn">按钮</button>
    <div class="clear"></div>
</div>

<script type="text/javascript">
    /**
     * 添加样式类名
     * @param obj 目标元素
     * @param cn 指定的样式类
     */
    function addClass (obj, cn) {
      // 先判断是否含有该样式类，有则加进去，没有则不加
      if(!hasClass(obj, cn)){
        obj.className += ' ' + cn
      }
    }

    /**
     * 判断是否含有指定的样式类
     * @param obj 目标元素
     * @param cn 指定的样式类
     * @returns {boolean} true表示有；false表示没有；
     */
    function hasClass (obj, cn) {
      // 定义正则表达式
      const reg = new RegExp("\\b" + cn + "\\b")
      // 判断是否含有传进来的样式类
      return reg.test(obj.className)
    }

    /**
     * 删除指定的样式类
     * @param obj 目标元素
     * @param cn 指定样式类
     */
    function removeClass (obj, cn) {
      // 定义正则表达式
      const reg = new RegExp("\\b" + cn + "\\b")
      // 删除class
      obj.className = obj.className.replace(reg, "")
    }

    // 获取元素
    let external = document.getElementsByClassName('external')[0]
    let btn = document.getElementsByClassName('btn')[0]

    // 设置监听函数
    external.onmouseenter = function () {
      // 给容器添加样式
      addClass(external, "external1")
      // 给按钮添加样式
      addClass(btn, "btn1")
    }
    external.onmouseleave = function () {
      // 删除样式
      removeClass(this, "external1")
      removeClass(btn, "btn1")
    }
    btn.onmouseenter = function () {
      // 添加样式
      addClass(this, "btn2")
    }
    btn.onmouseleave = function () {
      // 删除样式
      removeClass(this, "btn2")
    }
</script>
</body>
</html>