JavaScript中常用的事件及处理_javascript 事件-优快云博客

<head>
    <style>
        .box{
            width:  60px;
            height: 30px;
            background-color: aliceblue;
            border: 2px solid black;
            text-align: center;
        }

        body {  
            height: 3000px; /* 增加浏览器页面高度以便滚动 */  
        }
    </style>
</head>
<body>

    <div class="box" id="b1">
        事件
    </div>

    <script>
        // 为某个节点添加事件监听器
        box = document.getElementById("b1");

        box.addEventListener( "click",  
            function(){
                console.log("你的鼠标单击了！");
            } 
        );

        box.addEventListener( "dblclick",  
            function(){
                console.log("你的鼠标双击了！");
            } 
        );

    </script>

</body>

效果如下：

（2）按下和松开事件（`mousedown和mouseup`）‌：

mousedown在用户按下鼠标键时触发，而mouseup在用户释放鼠标键时触发‌。

<body>

    <div class="box" id="b1">
        事件
    </div>

    <script>
        // 为某个节点添加事件监听器
        box = document.getElementById("b1");


        box.addEventListener( "mousedown",  
            function(){
                console.log("你的鼠标按下了！");
            } 
        );

        box.addEventListener( "mouseup",  
            function(){
                console.log("你的鼠标抬起了！");
            } 
        );

    </script>
</body>

效果如下：

（3）移动事件‌（`mousemove,mouseenter和mouseleave`）：

mousemove在鼠标移动时触发，mouseenter和mouseleave分别在鼠标进入和离开元素时触发‌。

<body>

    <div class="box" id="b1">
        事件
    </div>
    <script>
        box.addEventListener( "mouseenter",  
            function(){
                console.log("你的鼠标进入目标元素了！");
            } 
        );

        box.addEventListener( "mouseleave",  
            function(){
                console.log("你的鼠标离开目标元素了！");
            } 
        );
    </script>
</body>

效果如下：

（4）悬浮和离开事件‌（`mouseover和mouseout`）：

mouseover在鼠标悬浮在元素或其子元素上时触发，而mouseout在鼠标离开元素时触发‌。

<body>

    <div class="box" id="b1">
        事件
    </div>

    <script>
        box.addEventListener( "mouseover",  
            function(){
                console.log("你的鼠标悬浮在在元素或其子元素上了！");
            } 
        );
        box.addEventListener( "mouseout",  
            function(){
                console.log("你的鼠标离开元素了！"