码迷,mamicode.com
首页 > Web开发 > 详细

WEB前端第三十三课——js事件处理-键盘、触摸

时间:2020-09-12 21:34:09      阅读:51      评论:0      收藏:0      [点我收藏+]

标签:默认   跟踪   screen   触摸   mic   连续   selector   相关   web   

1.键盘事件

  键盘事件是指当用户操作键盘的时候会自动被触发的事件,通常分为以下三种

    ① keydown,用户按下任意键都可以触发这个事件,如果按住不放,事件会被连续触发

    ② keypress,用户按下任意键都可以触发这个事件,如果按住不放,事件会被连续触发

           这里的任意键是指可显示的键,不包括功能键

           keypress方法识别大小写,而 keydown不区分

    ③ keyup,用户释放按键时触发事件

  键盘事件一般都是绑定在需要用户输入的元素上(例如 input),但是由于键盘事件默认采用事件冒泡机制

  因此,将键盘事件直接绑定在 body上也是允许的

  语法:元素节点 .on+事件名 = function(){ };

2.keyCode属性

  在键盘事件中,可以通过 event .keyCode来获取按下的键的编码值

  通过这个属性,可以获取到用户按下过哪些键

3.特点总结

  ① 捕获对象范围区别

    keypress主要用于捕获:数字(包括 shift+数字的符号)、字母(包括大小写)、小键盘等能够显示在屏幕上的内容

    但不能对系统功能键(回车、删除、方向等)进行正常响应,另外,不能对中文输入法有效响应

    而 keydown和 keyup通常可以捕获键盘上除了 PrtSc之外所有按键(特殊键盘的特殊键不在讨论范围)

  ② 捕获字符长度区别

    keypress只能捕获单个字符

    keydown和 keyup可以捕获组合键

  ③ 捕获字符大小写区别

    keypress可以捕获单个字符的大小写

    keydown和 keyup对于单个字符捕获的 keyCode大小写都是同一个值,即不能判断大小写

  ④ 捕获字符数字区别

    keypress不区分小键盘和主键盘的数字字符

    keydown和 keyup区分小键盘和主键盘的数字字符

  ⑤ 特殊情况

    PrScrn按键 keyPress、keyDown和 keyUp都不能捕获

    上下左右功能键 keyDown、keyUp都能获取 keyCode,并且值相同

4.常见键盘按键keyCode

  技术图片

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
</head>
<body>
    <input type="text">
    <span class="tips"></span>
<script>
    var tips=document.querySelector(‘.tips‘)
    var input=document.querySelector(‘input‘);
    input.onkeydown=function () {
        console.log(‘downKey:‘+event.keyCode);
        if (event.keyCode==13){
            console.log(input.value);
        }
    }
    input.onkeypress=function(){
        console.log(‘pressKey:‘+event.keyCode);
    };
    //检测大写锁定是否开启
    var flag=false;
    document.body.onkeydown=function () {
        if (event.keyCode==20){
            if (flag ==false){
                flag = true;
                tips.innerHTML=‘大写锁定已开启‘;
            }else{
                flag = false;
                tips.innerHTML=‘大写锁定已关闭‘;
            }
        }
    }
</script>
</body>
</html>

 

5.触摸事件

  ① touchstart,手指触摸屏幕时触发,即使已经有一个手指在屏幕上了,也会触发

  ② touchmove,手指在屏幕上滑动时连续的触发

  ③ touchend,手指从屏幕上移开时触发

  ④ touchcancel,系统停止跟踪触摸时触发(如电话接入、弹出信息等,一般用于触发暂停类的操作)

  语法示例:

    元素节点 .addEventListener(‘ touchstart ‘, function(){ });
  注意:

    如非特别说明,事件均为冒泡事件

    手机触摸事件必须使用 DOM2方式进行绑定

    可以给一个元素添加多个触摸事件

6.事件对象的属性

  事件对象,是“事件触发时”用来保存“事件相关的所有信息的对象”

  事件对象基本都是系统自动生成,不需要手动创建

  示例:

    元素节点 .addEventListener(‘ touchstart ‘,

      function(event){

        console.log(‘ touches begin ‘);

      });

  主要属性:

    ① touches,表示当前跟踪的触摸操作的 Touch对象的数组(当前屏幕上所有的触摸点列表)

    ② targetTouches,特定于事件目标的 Touch对象的数组(当前对象上所有的触摸点列表)

    ③ changeTouches,表示自上次触摸以来发生了什么改变的 Touch对象的数组(涉及当前事件的触摸点列表)

7.触摸对象的属性

  触摸对象,即 事件对象的 Touches属性中的每一个元素

  一次触摸会创建一个触摸对象

  触摸对象中提供了很多属性可供获取和使用:

    clientX,触摸目标在视口中的横坐标

    clientY,触摸目标在视口中的纵坐标

    identifier,表示触摸的唯一ID

    pageX,触摸目标在页面中的横坐标

    pageY,触摸目标在页面中的纵坐标

    screenX,触摸目标在屏幕中的X坐标

    screenY,触摸目标在屏幕中的Y坐标

    target,触摸的 DOM节点坐标

  一般情况下,在事件被触发时通过“ pageX和 pageY”两个属性来获取当前节点的位置

  获取触摸点坐标书写格式:

    event .touches[n] .pageX / pageY;  // n表示第几个触摸点

<body>
    <div class="divTouch" style="width: 500px;height: 600px;background-color: lightgreen;"></div>
<script>
    var divTouch=document.querySelector(‘.divTouch‘);
    divTouch.addEventListener(‘touchstart‘,function () {
        console.log(event.touches[0].pageX);
        console.log(event.touches[0].pageY);
        console.log(event.touches[0].clientX);
        console.log(event.touches[0].screenX);
        console.log(event);
    });
</script>
</body>

  技术图片

WEB前端第三十三课——js事件处理-键盘、触摸

标签:默认   跟踪   screen   触摸   mic   连续   selector   相关   web   

原文地址:https://www.cnblogs.com/husa/p/13587408.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!