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

  • A+
所属分类:Web前端
摘要

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

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

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

<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事件处理-键盘、触摸