JavaScript基础(33)_鼠标滚轮滚动事件、键盘事件

news2024/9/20 12:39:46

鼠标滚轮滚动事件：onwheel

获取鼠标滚轮滚动的方向：wheelDelta
比如：向上滚动：109 （所有正值都是向上）
向下滚动：-109（所有负值都是向下）

注意：当滚动滚动时，如果浏览器有滚动条，滚动条会随之滚动。这是浏览器的默认行为，如果不希望发生，则可以使用return false，取消默认行为。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>鼠标滚轮滚动事件</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: cadetblue;
        }
    </style>
    <script>
        window.onload = function () {
            var box1 = document.getElementById("box1");
            box1.onwheel = function (event) {
                if (event.wheelDelta > 0) {
                    if (box1.clientHeight >= 100)
                        box1.style.height = box1.clientHeight - 20 + "px";
                    else
                        box1.style.height = 100;
                }
                else {
                    box1.style.height = box1.clientHeight + 20 + "px";
                }
                return false;
            }
        }
    </script>
</head>
<body style="height: 2000px;height: 1000px;">
    <button id="box1">用鼠标滚轮实现变大变小</button>
</body>
</html>

键盘事件

键盘事件一般都会绑定给可以获取到焦点的对象或者是document。
onkeydown：某个键盘按键被按下。
onkeyup：某个键盘按键被松开。
注意：
1、对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发。
2、当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快。这种设计是为了防止误操作的发生。

如何识别用户按下的按键：
可以通过keyCode来获取按键的编码。通过它可以判断哪个按键被按下。除了keyCode，事件对象中还提供了几个属性：altKey、ctrlKey、shiftKey这三个用来判断alt、ctrl、shift是否按下。如果按下则返回true，否则返回false。

注意：在文本框中输入内容，属于onkeydown的默认行为，如果在onkeydown中取消默认行为(return false)，则用键盘输入的内容，无法出现在文本框中。

案例1：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <script>
        window.onload = function(){
            var input = document.getElementsByTagName("input");
            document.onkeydown = function(event){
                event = event || window.event;
                // 不许输入数字
                if(event.keyCode >= 48 && event.keyCode <= 57){
                    return false;
                }
            }
        }
    </script>
</head>
<body>
    <input type="text">
</body>
</html>

案例2：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>键盘移动div</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            position: absolute;
        }
    </style>
    <script>
        window.onload = function () {
            var box1 = document.getElementsByClassName("box1")[0];

            document.onkeydown = function (event) {
                switch (event.keyCode) {
                    // 向左
                    case 37:
                        if (box1.offsetLeft >= 18) {
                            box1.style.left = box1.offsetLeft - 10 + "px";
                        }
                        // 碰到左上边界禁止div变大或变小
                        else { box1.style.left = box1.offsetLeft + "px"; }
                        break;
                    // 向上
                    case 38:
                        if (box1.offsetTop >= 18) {
                            box1.style.top = box1.offsetTop - 10 + "px";
                        }
                        // 碰到左上边界禁止div变大或变小
                        else { box1.style.top = box1.offsetTop + "px"; }
                        break;
                    // 向右
                    case 39:
                        box1.style.left = box1.offsetLeft + 10 + "px"; break;
                    // 向下
                    case 40:
                        box1.style.top = box1.offsetTop + 10 + "px"; break;
                }
            }
        }
    </script>
</head>
<body>
    <div class="box1"></div>
</body>
</html>