JavaScript DOM——鼠标事件和键盘事件及案例

<style>

    img{

        width: 60px;

        position: absolute;

        top: 2px;

    }

</style>

<body>

    <img src="../images/1.ico" alt="">

    <script>

        var pic = document.querySelector('img');

        document.addEventListener('mousemove',function(e){

            var x = e.pageX;

            var y = e.pageY;

            pic.style.left = x + 'px';

            pic.style.top = y-40 + 'px';

        })

    </script>

</body>

鼠标移动显示当前坐标

案例需求

实现鼠标移动时显示鼠标指针当前坐标的效果

案例分析

与上一个案例相似，利用mousemove事件，将我们的坐标文本设置为绝对定位，根据鼠标移动的坐标来改变它的left值和top值，从而达到鼠标移动显示当前坐标的效果。

实现效果

实现代码

<style>

    span{

        position: absolute;

        top: 2px;

    }

</style>

<body>

    <span></span>

    <script>

        var ppp = document.querySelector('span');

        document.addEventListener('mousemove',function(e){

            var x = e.pageX;

            var y = e.pageY;

            ppp.innerHTML = "("+x+","+y+")";

            ppp.style.left = x-30 + 'px';

            ppp.style.top = y-30 + 'px';

        })

    </script>

</body>

三、键盘事件

常用的键盘事件

①keypress：某个键盘按键被按下时触发，不识别功能键，如Ctrl、Shift、箭头等。

②keydown：某个键盘按键被按下时触发。

③keyup：某个键盘按键被松开时触发。

区别：

keypress事件保存的按键值是ASCII码，而keydown和keyup事件保存的按键值是虚拟键码；
keypress事件区分字母大小写，而keydown和keyup事件不区分字母大小写。
keydown和keypress如果按住不放的话，会重复触发该对应事件。

键盘事件对象

KeyBoardEvent就是键盘事件对象，它是跟键盘事件相关的一系列信息的集合，根据键盘事件对象中的keyCode属性可以得到相应的ASCII码值，进而可以判断用户按下了哪个键。

四、键盘事件案例

检测用户是否按下a键

案例需求

检测用户是否按下a键，如果按下a键，就把光标定位到搜索框里面。

案例分析

先找到a的ASCII码值65，利用keyup事件，如果事件对象的keyCode值是65，则将光标定位到搜索框。

实现效果

实现代码

<body>

    <input type="text" name="" id="">

    <script>

        var search = document.querySelector('input');

        document.addEventListener('keyup', function (e) {

            if (e.keyCode === 65) {

                search.focus();

            }

        });

    </script>

</body>