27
2017
09

web-前端之事件冒泡,其中包括(onmousemove,onmouseover,onmouseout,onmouseleave,onmouseup,onmouseentter)可用于一些计数小游戏

这个是专门写了几个鼠标事件,其中很清晰的描述了每一个鼠标事件的发生和结束,可以很清楚的看见每一种事件的变化
这里是示意图,可以观察


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <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>
</html>
上一篇:策略模式 下一篇:如何给屏幕添加pop全屏手势