JS 鼠標、鍵盤事件對象

    鼠標事件對象

    mouseEvent鼠標事件對象

    e.clientX 在可視區的x和y的坐標

    e.pageX 在頁面文檔的X和Y的坐標

    <script>
        document.addEventListener('click', function (e) {
            console.log(e.clientX);
            console.log(e.clientY);
            console.log("--------------");
            console.log(e.pageX);
            console.log(e.pageY);
        })
    </script>

 

    鍵盤事件對象

    keyup按鍵彈起時觸發

    keydown鍵盤按下時觸發

    keypress鍵盤按下觸發 但是識別不了功能鍵

    三個事件執行順序是keydown,keypress,keyup

    keyup和keyDown事件不區分按下按鈕的大小寫

    keypress可以區分按下按鈕的大小寫的

<script>
        // 當鍵盤彈起時
        document.onkeyup = function () {
            console.log("彈起");
        }
        // 當鍵盤按下時
        document.onkeydown = function () {
            console.log("按下down");
        }
        // 當鍵盤按下時
        document.onkeypress = function () {
            console.log("按下press");
        }
        document.addEventListener('keyup', function (e) {
            // 返回按下按鈕的ascll碼值
            console.log(e.keyCode);
            // 利用ascll碼判斷用戶按下的什么鍵
            if (e.keyCode === 65) {
                alert("按下的是a鍵")
            } else {
                alert("按下的不是a鍵")
            }
        })
    </script>