冒泡事件

最新推荐文章于 2024-09-18 10:10:00 发布

凯凯王

最新推荐文章于 2024-09-18 10:10:00 发布

阅读量121

点赞数

本文链接：https://blog.csdn.net/fzhwk/article/details/78112755

版权

这里写图片描述

    <style>
        div{
            width: 300px;
            height: 300px;
            border: 1px solid #000000;
            float: left;
            margin: 10px 20px;
        }
        div p{
            background-color: #A9BF8E;
            color: #ffffff;
            text-align: center;
            height: 50px;
            line-height:50px ;
        }
    </style>
<script>
    var a = 0;
    var b = 0;
    var c = 0;
    var d = 0;
    var e = 0;

    function Mymove(){
        a++;
        var font = document.getElementById("a");
        font.innerHTML = a;
    }

    function Myover(){
        b++;
        var font = document.getElementById("b");
        font.innerHTML = b;
    }

    function Myout(){
        c++;
        var font = document.getElementById("c");
        font.innerHTML = c;
    }

    function Myenter(){
        d++;
        var font = document.getElementById("d");
        font.innerHTML = d;
    }

    function Myleave(){
        e++;
        var font = document.getElementById("e");
        font.innerHTML = e;
    }

</script>                       
</head>


<body>
        <div onmousemove="Mymove()">
            <font id="a">0</font>
            <p>鼠标移动事件onmousemove</p>
        </div>
        <div onmouseover="Myover()">
            <font id="b">0</font>
            <p>鼠标移入事件onmouseover</p>
        </div>
        <div onmouseout="Myout()">
            <font id="c">0</font>
            <p>鼠标移出事件onmouseout</p>
        </div>
        <div onmouseenter="Myenter()">
            <font id="d">0</font>
            <p>鼠标移入事件onmouseenter</p>
        </div>
        <div onmouseleave="Myleave()">
            <font id="e">0</font>
            <p>鼠标移出事件onmouseleave</p>
        </div>

</body>