WEB前端第三十三课——js事件处理-键盘、触摸
【摘要】 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事件处理-键盘、触摸的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！