js中的键盘事件和触摸事件

一、键盘事件
键盘事件不能绑定某个标签，必须是window或document两个使用效果完全一致。可以获取焦点的标签：input select textarea button a 。。。

1、keydown 按下按键触发，如果一直按着，会一直触发

//按下键盘任意按键，触发事件
window.onkeydown = function(){
　　console.log(12);
}
//按下键盘任意按键，触发事件
document.onkeydown = function(){
　　console.log(34);
}

2、keyup 按键抬起事件

//按下键盘任意键后，松开后才会触发，一直按着不会触发，如果同时按着多个，松开任意一个也会触发
window.onkeyup = function(){
    console.log(12);
}
//按下键盘任意键后，松开后才会触发，一直按着不会触发，如果同时按着多个，松开任意一个也会触发
document.onkeyup = function(){
    console.log(34);
}

3、标签添加相关事件

//标签上添加事件
var oDiv = document.querySelector('div');
//对象.onkeydown/onkeyup
oDiv.onkeydown = function(){
    console.log(56);
}

4、按键的事件对象
e.key 存储按下的按键名称（数字键盘不做区分）
e.keycode 每个按键对应一个数值，不会重复，使用这个来区分每个按键，低版本火狐需要做兼容处理：var 变量 = e.keycode || e.which

window.onkeydown = function(e){
    console.log(e);
}

5、按键组合
ctrl alt shift + 其他组合按键

事件对象e中有3个属性
ctrlKey 按下 ctrl 结果是 true 没有按结果是false
altKey 按下 alt 结果是 true 没有按结果是false
shiftKey 按下 shift 结果是 true 没有按结果是false

//判断按下按键时ctrl + e(69)
window.onkeydown = function(e){
    if(e.ctrlKey == true && e.keycode == 69){
        console.log('同时按下ctrl键和e键')
    }
}

二、触摸事件(主要用于移动端)
touchstart 触摸开始
touchend 触摸结束
touchmove 触摸移动
其他事件就是这三个事件的组合使用
1、长按：触摸与结束时间差大于(1秒或者0.5秒，浏览器规定的，跟js没关)

2、轻触：触摸时间小于100毫秒
3、左移：触摸开始，触摸结束，坐标差

4、特殊事件：
当过度结束时：transitionend 当过度结束时
当动画结束时： animationend 当动画结束时

// 有几个执行的属性,程序就执行几次操作
var oDiv = document.querySelector('div');
oDiv.ontransitionend = function(){
    console.log('过度结束了')
}

js中的键盘事件和触摸事件

猜你喜欢