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

时间:2020-09-13 11:23:37 来源:

【摘要】 WEB前端第三十三课——js事件处理-键盘、触摸考必过小编为大家整理了关于WEB前端第三十三课——js事件处理-键盘、触摸的信息,希望可以帮助到大家!

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

标签:默认跟踪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(‘touchesbegin‘);

    });

主要属性:

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

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

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

7.触摸对象的属性

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

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

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

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

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

  identifier,表示触摸的唯一ID

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

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

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

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

  target,触摸的DOM节点坐标

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

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

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

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

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

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

以上就是WEB前端第三十三课——js事件处理-键盘、触摸的内容,更多资讯请及时关注考必过网站,最新消息小编会第一时间发布,大家考试加油!

上一篇      下一篇
前端相关推荐 更多>>
前端热点专题 更多>>
热点问答
国家公务员考试年龄限制是多少 公务员国考和省考考试内容有什么区别 函授大专学历能不能考公务员 国家公务员考试考点能自己选择吗 新闻学专业能报考2022年公务员考试吗 什么是联合培养研究生 什么是破格录取研究生 什么人不适合读研 研究生报名户口所在地填什么 研究生结业和毕业有什么区别
网站首页 网站地图 返回顶部
考必过移动版 https://m.kaobiguo.net