DOM(三):鼠标、键盘事件对象

鼠标、键盘事件对象

    • 鼠标事件对象
    • 键盘事件对象

鼠标事件对象

event对象代表事件的状态,和事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent

DOM(三):鼠标、键盘事件对象_第1张图片

例如:

    // 鼠标事件对象 MouseEvent
        document.addEventListener('click', function (e) {
            // 1. client 鼠标在可视区(即不管屏幕是否发生滚动,参考只是窗口)的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');
            // 2. page 鼠标在页面文档的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');
            // 3. screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);
        })

案例:跟随鼠标移动的天使

实现原理:

  • 鼠标不断的移动,使用鼠标移动事件: mousemove
  • 在页面中移动,给document注册事件
  • 图片要移动距离,而且不占位置,我们使用绝对定位即可
  • 核心原理: 每次鼠标移动,我们都会获得最新的鼠标坐标, 把这个x和y坐标做为图片的top和left 值就可以移动图片
<body>
    <div>
    <img src="images/angel.gif" alt="">
</div>
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove', function(e) {
            var x = e.pageX;
            var y = e.pageY;
            console.log('x坐标是' + x, 'y坐标是' + y);
            //3 . 千万不要忘记给left 和top 添加px 单位
            pic.style.left = x - 50 + 'px';
            pic.style.top = y - 35 + 'px';
        });
    </script>
</body>

键盘事件对象

DOM(三):鼠标、键盘事件对象_第2张图片

注意:

  • 如果使用addEventListener 不需要加 on
  • onkeypress 和前面2个的区别是,它不识别功能键,比如左右箭头,shift 等。
  • 三个事件的执行顺序是: keydown 、 keypress 、 keyup

例如:

DOM(三):鼠标、键盘事件对象_第3张图片

结果:
DOM(三):鼠标、键盘事件对象_第4张图片

请添加图片描述
注意:

  • onkeydown 和 onkeyup 不区分字母大小写,onkeypress 区分字母大小写。
  • 在实际开发中,更多的使用keydown和keyup, 它能识别所有的键(包括功能键)
  • Keypress 不识别功能键,但是keyCode属性能区分大小写,返回不同的ASCII值

DOM(三):鼠标、键盘事件对象_第5张图片

案例:当我们按下s键时,光标定位到搜索框

案例分析:

  • 核心思路: 检测用户是否按下了s 键,如果按下s 键,就把光标定位到搜索框里面
  • 使用键盘事件对象里面的keyCode 判断用户按下的是否是s键
  • 搜索框获得焦点: 使用 js 里面的 focus() 方法

DOM(三):鼠标、键盘事件对象_第6张图片

效果:效果为按下s之后自动获取输入框的位置

请添加图片描述

DOM(三):鼠标、键盘事件对象_第7张图片

你可能感兴趣的:(JavaScript,javascript,前端,开发语言)