关于js_鼠标事件的介绍与简单使用

最新推荐文章于 2024-08-23 17:28:19 发布

NewBurlaSKing

最新推荐文章于 2024-08-23 17:28:19 发布

阅读量436

点赞数

分类专栏： javascript 文章标签： javascript 前端 html css3

本文链接：https://blog.csdn.net/qq_55961861/article/details/126330056

版权

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

js_鼠标事件

一.鼠标事件分类

1 click：按下鼠标时触发

2 dblclick：在同一个元素上双击鼠标时触发

3 mousedown：按下鼠标键时触发

4 mouseup：释放按下的鼠标键时触发

5 mousemove：当鼠标在节点内部移动时触发。当鼠标持续移动时，该事件会连触发。

6 mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件

7 mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件

8 mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件

9 mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件

10 wheel：滚动鼠标的滚轮时触发

二.实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 150px;
            height: 150px;
            background-color: aquamarine;
        }
        .box1 {
            width: 150px;
            height: 150px;
            background-color: red;
        }

        .box2 {
            width: 250px;
            height: 250px;
            background-color: green;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        .box4 {
            width: 150px;
            height: 150px;
            background-color: aqua;
        }

        .box5 {
            width: 250px;
            height: 250px;
            background-color:rebeccapurple;
        }
        .box6 {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        .h {
            width: 100px;
            height: 300px;
        }
    </style>
</head>
<body>
    <button id="btn1">我是单机触发的按钮1</button>
    <br>
    <button id="btn2">我是双击触发的按钮2</button>
    <br>
    <button id="btn3">我是鼠标按下触发的按钮3</button>
    <br>
    <button id="btn4">我是鼠标释放按下触发的按钮4</button>
    <br>
    <div id="box" class="box">我是盒子1</div>
    <br>
    <div class="box2">
        <div id="box1" class="box1">我是盒子2
            <div class="box3"></div>
        </div>
    </div>
    <br>
    <div class="box5">
        <div id="box4" class="box4">我是盒子4
            <div  id="box6" class="box6">我是盒子6</div>
        </div>
    </div>
    <div id="wheel">
        <h2 class="h">哈哈</h2>
        <h2 class="h">哈哈</h2>
        <h2 class="h">哈哈</h2>
        <h2 class="h">哈哈哈哈哈哈哈哈哈哈哈</h2>
    </div>
    <script>
        var btn1 = document.getElementById('btn1');
        var btn2 = document.getElementById('btn2');
        var btn3 = document.getElementById('btn3');
        var btn4 = document.getElementById('btn4');
        var box = document.getElementById('box');
        var box1 = document.getElementById('box1');
        var box4 = document.getElementById('box4');
        var box6 = document.getElementById('box6');
        var w = document.getElementById('wheel');
        // 鼠标单击事件
        btn1.onclick = function () {
            console.log('有人单击了按钮1！');
        }
        
        // 鼠标双击事件
        btn2.ondblclick = function() {
            console.log('有人双击了按钮2！');
        }

        // 鼠标按下事件
        btn3.onmousedown = function() {
            console.log('有人对按钮3进行了鼠标按下操作！');
        }
        
        // 鼠标释放按下事件
        btn4.onmouseup = function() {
            console.log('有人对按钮4进行了鼠标释放按下操作！');
        }

        // 鼠标移动事件
        box.onmousemove = function() {
            console.log('有人用鼠标在盒子1中移动！');
        }

        // 鼠标进入事件 enter
        box1.onmouseenter = function() {
            console.log('有人用鼠标进入了盒子2中！');
        }

        // 鼠标离开事件 leave
        box1.onmouseleave = function() {
            console.log('有人用鼠标离开了盒子2！');
        }

        // 鼠标进入事件 over
        box4.onmouseover = function() {
            console.log('有人用鼠标进入了盒子4中！');
        }

        // 鼠标离开事件 out
        box4.onmouseout = function() {
            console.log('有人用鼠标离开了盒子4！');
        }

        // 鼠标滚动事件
        w.onwheel = function() {
            console.log('鼠标滚动了！');
        }
    </script>
</body>
</html>