事件冒泡

最新推荐文章于 2024-06-18 09:28:07 发布

qq_38933334

最新推荐文章于 2024-06-18 09:28:07 发布

阅读量175

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_38933334/article/details/78112943

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

    <style>
        div{
            width: 300px;
            height: 300px;
            border: 1px solid #000000;
            float: left;
            margin: 10px 20px;
        }
        div p{
            background-color: gray;
            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++; // a = a + 1;
            var font = document.getElementById("a");//获取font标签对象
            font.innerHTML = a;
        }

        //鼠标移入事件over
        function myOver(){
            b++;
            var font = document.getElementById("b");//获取font标签对象
            font.innerHTML = b;
        }

        //鼠标移出事件out
        function myOut(){
            c++;
            var font = document.getElementById("c");//获取font标签对象
            font.innerHTML = c;
        }

        //鼠标移入事件enter
        function myEnter(){
            d++;
            var font = document.getElementById("d");//获取font标签对象
            font.innerHTML = d;
        }

        //鼠标移出事件leave
        function myLeave(){
            e++;
            var font = document.getElementById("e");//获取font标签对象
            font.innerHTML = e;
        }

    </script>

</head>
<body>

    <div onmousemove="myMove()">
        <font id="a">0</font>
        <p>鼠标移动事件onmousemove</p>
    </div>

    <!--事件冒泡-->
    <div onmouseover="myOver()">
        <font id="b" style="border: 1px solid #000000;">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>

qq_38933334

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件冒泡

<style> div{ width: 300px; height: 300px; border: 1px solid #000000; float: left; margin: 10px 20px; } div p{
复制链接

扫一扫