javaScript中鼠标冒泡事件

来源：互联网发布：淘宝优惠群怎么找商家编辑：程序博客网时间：2024/06/07 01:06
这里写图片描述
<html><head>    <meta charset="utf-8">    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />    <title></title>    <style>        div{            border: 1px solid cadetblue;            height: 300px;            width: 300px;            float: left;            margin: 10px 20px;        }        div p{            color: azure;            background-color: darkseagreen;            text-align: center;            line-height: 40px;        }    </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()">        <span id="a">0</span>        <p>鼠标移动事件onmousemove</p>    </div>    <div onmouseover="myOver()">        <span id="b">0</span>        <p>鼠标移入事件onmouseover</p>    </div>    <div onmouseout="myOut()">        <span id="c">0</span>        <p>鼠标移出事件onmouseout</p>    </div>    <div onmouseenter="myEnter()">        <span id="d">0</span>        <p>鼠标移入事件onmouseenter</p>    </div>    <div onmouseleave="myLeave()">        <span id="e">0</span>        <p>鼠标移出事件onmouseleave</p>    </div></body></html>
阅读全文
0 0