前端學習(53)~鍵盤事件

滑鼠的拖拽事件

拖拽的流程：

（1）

onmousedown

：當滑鼠在被拖拽元素上按下時，開始拖拽；

（2）

onmousemove

：當滑鼠移動時被拖拽元素跟随滑鼠移動；

（3）

onmouseup

：當滑鼠松開時，被拖拽元素固定在目前位置。

滑鼠的滾輪事件

onmousewheel

：滑鼠滾輪滾動的事件，會在滾輪滾動時觸發。但是火狐不支援該屬性。

DOMMouseScroll

：在火狐中需要使用 DOMMouseScroll 來綁定滾動事件。注意該事件需要通過addEventListener()函數來綁定。

鍵盤事件

事件名

onkeydown

：按鍵被按下。

onkeyup

：按鍵被松開。

注意：

如果一直按着某一個按鍵不松手，那麼， onkeydown 事件會一直觸發。此時，松開鍵盤， onkeyup 事件會執行一次。
當 onkeydown 連續觸發時，第一次和第二次之間會間隔稍微長一點，後續的間隔會非常快。這種設計是為了防止誤操作的發生。

鍵盤事件一般都會綁定給一些可以擷取到焦點的對象或者是document。代碼舉例：

<body>
        <script>
            document.onkeydown = function(event) {
                event = event || window.event;
                console.log('qianguyihao 鍵盤按下了');
            };

            document.onkeyup = function() {
                console.log('qianguyihao 鍵盤松開了');
            };
        </script>

        <input type="text" />
    </body>

複制

判斷哪個鍵盤被按下

可以通過

event

事件對象的

keyCode

來擷取按鍵的編碼。

此外，

event

事件對象裡面還提供了以下幾個屬性：

altKey
ctrlKey
shiftKey

上面這三個屬性，可以用來判斷

alt

、

ctrl

、和

shift

是否被按下。如果按下則傳回true，否則傳回false。代碼舉例：

<body>
        <script>
            document.onkeydown = function(event) {
                event = event || window.event;
                console.log('qianguyihao：鍵盤按下了');

                // 判斷y和ctrl是否同時被按下
                if (event.ctrlKey && event.keyCode === 89) {
                    console.log('ctrl和y都被按下了');
                }
            };
        </script>
    </body>

複制

舉例：input 文本框中，禁止輸入數字。代碼實作：

<body>
        <input type="text" />

        <script>
            //擷取input
            var input = document.getElementsByTagName('input')[0];

            input.onkeydown = function(event) {
                event = event || window.event;

                //console.log('qianguyihao:' + event.keyCode);
                //數字 48 - 57
                //使文本框中不能輸入數字
                if (event.keyCode >= 48 && event.keyCode <= 57) {
                    //在文本框中輸入内容，屬于onkeydown的預設行為
                    return false; // 如果在onkeydown中取消了預設行為，則輸入的内容，不會出現在文本框中
                }
            };
        </script>
    </body>

複制

舉例：通過鍵盤的方向鍵，移動盒子

代碼實作：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title></title>
        <style type="text/css">
            #box1 {
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div id="box1"></div>

        <script type="text/javascript">
            // 使div可以根據不同的方向鍵向不同的方向移動
            /*
             * 按左鍵，div向左移
             * 按右鍵，div向右移
             * ...
             */

            //為document綁定一個按鍵按下的事件
            document.onkeydown = function(event) {
                event = event || window.event;

                //定義一個變量，來表示移動的速度
                var speed = 10;

                //當使用者按了ctrl以後，速度加快
                if (event.ctrlKey) {
                    console.log('smyhvae ctrl');
                    speed = 20;
                }

                /*
                 * 37 左
                 * 38 上
                 * 39 右
                 * 40 下
                 */
                switch (event.keyCode) {
                    case 37:
                        //alert("向左"); left值減小
                        box1.style.left = box1.offsetLeft - speed + 'px'; // 在初始值的基礎之上，減去 speed 大小
                        break;
                    case 39:
                        //alert("向右");
                        box1.style.left = box1.offsetLeft + speed + 'px';
                        break;
                    case 38:
                        //alert("向上");
                        box1.style.top = box1.offsetTop - speed + 'px';
                        break;
                    case 40:
                        //alert("向下");
                        box1.style.top = box1.offsetTop + speed + 'px';
                        break;
                }
            };
        </script>
    </body>
</html>

複制