WEB前端第三十三课——js事件处理-键盘、触摸 / 四六文摘

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

相关推荐