鼠标移入移出双击单击事件-蒲公英云

鼠标移入移出双击单击事件

- 日理万妓 2021-09-18 14:44 519阅读 0赞

qq交流群： 581478349

<!DOCTYPE html>
<html>
    <head>
        <!--中文-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <div id="xuanzhuang">效果</div>
    </body> 
    <script type="text/javascript">
        //函数
        function aaa() {
            //鼠标移入
            document.getElementById("xuanzhuang").onmouseover = function() {
                console.log(this)
                document.getElementById("xuanzhuang").style.backgroundColor = "green";
            }
            //鼠标移出
            document.getElementById("xuanzhuang").onmouseout = function() {
                console.log(this)
                document.getElementById("xuanzhuang").style.backgroundColor = "red";
            }
            //单击
            document.getElementById("xuanzhuang").onclick = function() {
                console.log(this)
                document.getElementById("xuanzhuang").style.backgroundColor = "yellowgreen";
            }
            //双击
            document.getElementById("xuanzhuang").ondblclick = function() {
                console.log(this)
                document.getElementById("xuanzhuang").style.backgroundColor = "#ccc";
            }
        }
        //调用函数
        aaa();
    </script>
</html>