鼠标事件

　　　　　　　　鼠标事件

---

鼠标事件有两个元素：

mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。

他们的不同点就是：mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。

我们可以写一个清理后台垃圾进度条的一个项目来了解一下。

首先建一个盒子，完成简单的页面布局

<div id="box">
    <p>检测到您的电脑有2.4G垃圾，点击立即清理！</p>
    <div></div>
    <button>立即清理</button>
</div>

   #box {
            width: 800px;
            margin: 100px auto 0;
        }
   #box > div {
            background: red;
            width: 0;
            height: 30px;
            /*animation: clear 6s linear forwards*/
        }

这样简单的css和HTML就完成了，我们再给进度条写一个动画，我们可以适当调整进度条的快慢，设置它前半部分快，后半部分慢这样更真实。

 @keyframes clear {
            0% {
                width: 0
            }
            50% {
                width: 700px
            }
            80% {
                width: 700px
            }
            100% {
                width: 800px
            }
        }

接下来就是我们的鼠标事件：

<script>
    var box = document.getElementById('box'),
        div1 = box.getElementsByTagName('div')[0],
        btn = box.getElementsByTagName('button')[0]
    btn.onclick = function () {
        div1.style.animation = "clear 6s linear forwards"
        setTimeout(function () {
            alert('恭喜您，清理成功')
        }, 6500)

    }
</script>

点击bottom标签，引发鼠标事件。

整个动画6秒完成，6500毫秒后弹窗出现，“恭喜您，清理成功”。

这就是一个简单的鼠标事件。