冒泡事件

来源:互联网 发布:手机店记账软件 编辑:程序博客网 时间:2024/06/07 00:59

这里写图片描述





    <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>