Dom常见鼠标与键盘事件对象

基础JavaScript

Dom文档对象模型

6. 鼠标事件

6.1 鼠标事件

image-20230301160816867

6.2 鼠标事件对象

image-20230301160833036

image-20230301160847413

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!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>
        body{
            height: 3000px;
        }
    </style>
</head>

<body>
    <script>
        // 鼠标事件对象 MouseEvent
        document.addEventListener('click', function (e) {
            // 1. client 鼠标在可视区的x和y坐标
            console.log('clientX:'+e.clientX);
            console.log('clientY:'+e.clientY);
            console.log('---------------------');

            // 2. page 鼠标在页面文档的x和y坐标
            console.log('pageX:'+e.pageX);
            console.log('pageY:'+e.pageY);
            console.log('---------------------');

            // 3. screen 鼠标在电脑屏幕的x和y坐标
            console.log('screenX:'+e.screenX);
            console.log('screenY:'+e.screenY);

        })

        // e.clientX 返回鼠标相对于浏览器窗口可视区的X坐标
        // e.clientY 返回鼠标相对于浏览器窗口可视区的Y坐标
        // e.pagex   返回鼠标相对于文档页面的X坐标E9+支持
        // e.pageY   返回鼠标相对于文档页面的Y坐标E9+支持
        // e.screenX 返回鼠标相对于电脑屏幕的X坐标
        // e.screenY 返回鼠标相对于电脑屏幕的Y坐标
    </script>
</body>

</html>

6.3 禁止右键菜单和禁止选中文字

  • contextmeau 右键菜单
  • selectstart 选中文字
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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>
</head>

<body>
    我是一段不愿意分享的文字
    <script>
        // 1. contextmenu 我们可以禁用右键菜单
        document.addEventListener("contextmenu", function (e) {
            e.preventDefault()
        })

        // 2. 禁止选中文字 selectstart
        document.addEventListener('selectstart', function (e) {
            e.preventDefault();
        })
    </script>
</body>

</html>

6.4 鼠标天使

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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>
        body{
            height: 3000px;
        }
    </style>
</head>

<body>
    <img src="./images/angel.gif" alt="" srcset="">
    <script>
        // 1、鼠标不断的移动，使用鼠标移动事件：mousemove
        // 2、在页面中移动，给documenti注册事件
        // 3、图片要移动距离，而且不占位置，我们使用绝对定位即可
        // 4、核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个和y坐标故为图片的
        //    top和left值就可以移动图片
        var img = document.querySelector('img')
        img.style.width = '30px'
        img.style.height = '30px'
        img.style.position = 'absolute'

        document.addEventListener('mousemove', function (e) {
            var x = e.pageX
            var y = e.pageY

            img.style.left = x-15+'px'
            img.style.top = y-20+'px'

        })
    </script>
</body>

</html>

6.5 鼠标跟随特效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!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>
        body {
            height: 3000px;
        }

        * {
            padding: 0;
            margin: 0;
        }

        .round {
            position: fixed;
            top: 0;
            left: 0;
            width: 30px;
            height: 30px;
            border: 1px solid #ccc;
            box-sizing: border-box;
            border-radius: 50%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: -1;
        }

        .dot {
            width: 10px;
            height: 10px;
            background-color: grey;
            border-radius: 50%;
            transition: all .1s;
        }

        .big {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="round">
        <div class="dot"></div>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var round = document.querySelector('.round')
            var dot = document.querySelector('.dot')

            document.addEventListener('mousemove', function (e) {
                // clientX 浏览器窗口可视区的X坐标
                // clientY 浏览器窗口可视区的Y坐标
                var x = e.clientX - round.offsetWidth / 2
                var y = e.clientY - round.offsetHeight / 2
                round.style.left = x + 'px'
                round.style.top = y + 'px'

                this.addEventListener('mousedown', move)
                function move() {
                    dot.className = 'dot big'
                }

                this.addEventListener('mouseup', movee)
                function movee() {
                    dot.className = 'dot'
                }
            })

            if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
                // window.location.href = "../H5/index.html"; //手机
                round.style.display = 'none'
                console.log('7878');
            }
        })
    </script>
</body>

</html>

7. 键盘事件

7.1 键盘事件

image-20230301162413033

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 常用的键盘事件
        //1. keyup 按键弹起的时候触发
        document.addEventListener('keyup', function () {
            console.log('我弹起了');
        })

        //2. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keydown', function () {
            console.log('我按下了down');
        })

        //3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keypress', function () {
            console.log('我按下了press');
        })

        // 4. 三个事件的执行顺序 keydown -- keypress -- keyup
    </script>
</body>

</html>

7.2 键盘事件对象

image-20230301162458983

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
        // 1. 我们的keyup 和keydown事件不区分字母大小写  a 和 A 得到的都是65
        // 2. 我们的keypress 事件 区分字母大小写  a  97 和 A 得到的是65
        document.addEventListener('keyup', function(e) {
            // console.log(e);
            console.log('up:' + e.keyCode);
            // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
            if (e.keyCode === 65) {
                alert('您按下的a键');
            } else {
                alert('您没有按下a键')
            }

        })
        document.addEventListener('keypress', function(e) {
            // console.log(e);
            console.log('press:' + e.keyCode);

        })
    </script>
</body>

</html>

image-20230301162535425

7.3 模拟京东按键输入内容

image-20230301162610983

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!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>
</head>

<body>
    <input type="text">
    <script>
        // 当我们按下 s 键， 光标就定位到搜索框（文本框获得焦点）。
        // 核心思路：检测用户是否按下了$键，如果按下$键，就把光标定位到搜索框里面
        // 使用键盘事件对象里面的keyCode判断用户按下的是否是s键
        // 搜索框获得焦点：使用js里面的focus()方法
        // 注意：触发获得焦点事件，可以使用元素对象focus()

        // 获取输入框
        var search = document.querySelector('input')
        // 给document注册keyup事件
        document.addEventListener('keyup', function (e) {
            // 判断keyCode的值
            if (e.keyCode === 83 || e.keyCode === 115) {
                // 触发输入框的获得焦点事件
                search.focus();
            }
        })
    </script>
</body>

</html>

7.4 模拟输入框提示盒子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!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>
        .info {
            display: flex;
            flex-direction: column;
            margin: 50px;
            width: 158px;
            height: 80px;
            position: relative;
        }

        .con {
            white-space: nowrap;
            /*在同一行进行显示*/
            text-overflow: ellipsis;
            /*超过部分用...代替*/
            overflow: hidden;
            width: 150px;
            height: 30px;
            line-height: 30px;
            padding-left: 5px;
            border-top: 1px solid #ccc;
            border-left: 1px solid #ccc;
            box-shadow: 1px 1px 2px 0px rgb(0, 0, 0);
            margin-bottom: 10px;
            position: relative;
            top: 0;
        }

        .con::after {
            content: '';
            width: 0px;
            height: 0px;
            border-top: 10px solid rgb(0, 0, 0);
            border-right: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 5px solid transparent;
            position: absolute;
            bottom: -15px;
            left: 5px;
            z-index: 1;
        }

        input {
            width: 150px;
            height: 30px;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div class="info">
        <div class="con">123</div>
        <input type="text" placeholder="请输入您的快递单号" class="jd">
    </div>
    <script>
        // 1、快递单号输入内容时，上面的大号字体盒子(con)显示（这里面的文字
        // 2、同时把快递单号里面的值(value)获取过来赋值给con盒子(innerText)故为内容
        // 3、如果快递单号里面内容为空，则隐藏大号字体盒子(co)盒子
        // 4、注意：keydown和keypress在文本框里面的特点：他们两个事件触发的时候，文字还没有落入文本框中。
        // 5、keyup事件触发的时候，文字已经落入文本框里面了
        // 6、当我们失去焦点，就隐藏这个con盒子
        // 7、当我们获得焦点，并且文本框内容不为空，就显示这个con盒子
        var con = document.querySelector('.con')
        con.style.display = 'none'
        var input = con.nextElementSibling
        input.addEventListener('keyup', function (e) {
            if (input.value == '' || input.value == null) {
                con.style.display = 'none'
            } else {
                con.style.display = 'block'
                con.innerHTML = input.value
            }
        })

        document.addEventListener('keyup', function (e) {
            // 判断keyCode的值
            if (e.keyCode === 83 || e.keyCode === 115) {
                // 触发输入框的获得焦点事件
                input.focus();
            }
        })

        // 当我们失去焦点，就隐藏这个con盒子
        input.addEventListener('blur', function () {
            con.style.display = 'none';
        })
        // 当我们获得焦点，就显示这个con盒子
        input.addEventListener('focus', function () {
            if (this.value !== '') {
                con.style.display = 'block';
            }
        })

    </script>
</body>

</html>

Solar-Rain程序 & 设计

随心所欲，不逾矩 ~