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>