// 键盘多按键事件
// 在定义事件处理函数时,如果定义一个形参,JavaScript程序会自动向这个形参存储数据
// 形参中存储的是事件对象的相关数据信息
// 触发事件的对象,键盘事件,就是触发事件的按键,相关信息
// 一般 事件对象 形参名称为 event 或者 e
// 解决兼容问题:低版本IE,存储事件对象的语法,不是在事件处理函数中定义形参
// 低版本IE存储事件对象方式 : window.event
// 如果是 不兼容的语法,执行结果是 undefined
// 说明: 最新高版本 谷歌火狐等浏览器也兼容 window.event 语法
// 实际面试时,会问兼容写法
// 已经有定义的形参 e 可以直接对形参e进行赋值,不用再新定义变量
// 如果 e 有存储内容,就赋值本身存储的内容
// 如果 e 没有存储内容,结果是undefined,赋值 window.event 内容
// 重要内容
// key 按键名称 -- 会有按键相同重复
// keyCode 键盘按键编码
// 低版本的火狐浏览器,不支持keyCode
// 使用的是 which,为了兼容低版本火狐浏览器,也要使用兼容语法
// var keyCode = e.keyCode || e.which
// 高版本的火狐浏浏览器可以直接使用 e.keyCode
// altKey ctrlKey shiftKey 判断是否按下 alt ctrl shift 键
// 按下是 true 没有按下是 false
// 可以通过这三个属性,判断多按键
document.onkeydown = function(e){
// 兼容事件对象
e = e || window.event;
// console.log(e);
// 兼容获取按键编码
var keyCode = e.keyCode || e.which;
// 判断按键是否是 alt + ctrl + j (74)
if (e.altKey && e.ctrlKey && keyCode === 74){
console.log('三个按键都按下')
}
}
<style>
* {
margin: 0;
padding: 0;
}
div {
100px;
height: 100px;
background: pink;
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div></div>
<script>
var oDiv = document.querySelector('div');
// 虽然要控制div,但是键盘按下事件,只能加载给document对象
document.onkeydown = function (e) {
// 需要先获取标签定位的原始数据
// 数值的修改,是在原始数值基础上的修改
var left;
var top;
// 通过兼容语法,获取标签的原始数据
if (window.getComputedStyle) {
left = window.getComputedStyle(oDiv).left;
top = window.getComputedStyle(oDiv).top;
} else {
left = oDiv.currentStyle.left;
top = oDiv.currentStyle.top;
}
// 执行结果是 left 和 top 有 px单位,要执行计算时,要去除px单位
left = parseInt(left);
top = parseInt(top);
// 1,兼容事件对象
e = e || window.event;
// 2,兼容按键编码
var keyCode = e.keyCode || e.which;
// 3,判断按键 左37 上38 右39 下40
// if判断 和 switch判断 都可以 switch更好
/*
if(keyCode === 38){
// 如果上按键,给 top 数值 -= 一个固定数值
top -= 10;
// 将新的数据数值,赋值给标签对象,必须要有px单位
oDiv.style.top = top + 'px';
}else if(keyCode === 40){
// 如果下按键,给 top 数值 += 一个固定数值
top += 10;
// 将新的数据数值,赋值给标签对象,必须要有px单位
oDiv.style.top = top + 'px';
}else if(keyCode === 37){
// 如果左按键,给 left 数值 -= 一个固定数值
left -= 10;
// 将新的数据数值,赋值给标签对象,必须要有px单位
oDiv.style.left = left + 'px';
}else if(keyCode === 39){
// 如果左按键,给 left 数值 == 一个固定数值
left += 10;
// 将新的数据数值,赋值给标签对象,必须要有px单位
oDiv.style.left = left + 'px';
}
*/
// 第二种if判断
if (keyCode === 38 || keyCode === 40) {
// 上或者下
if (keyCode === 38) {
// 上
top -= 10;
} else {
// 下
top += 10;
}
oDiv.style.top = top + 'px';
} else if (keyCode === 37 || keyCode === 39) {
// 左或者右
if (keyCode === 37) {
// 左
left -= 10;
} else {
// 有
left += 10;
}
oDiv.style.left = `${left}px`;
}
}
// 总结
// 1,思路:
// 获取标签的原始数据信息 定位数值
// 给document添加键盘按下事件
// 获取按键keyCode,判断是哪个按键
// 根据不同的按键,给定位属性修改属性值, += -=
// 最后将新的属性值,赋值给标签,作为定位的数据
// 2,问题:
// 兼容处理:
// 事件对象e兼容
// keyCode兼容
// 获取标签执行样式兼容处理
// 获取的样式,是否带有px单位
// 带有单位的字符串,没有把办法直接执行 算术运算符
// 赋值给标签时,注意要带上px单位
// 所有的大小数据,赋值时,都要带有px单位
// 数值要对应按键,千万别记错了
// 左移 left- 右移left+ 上移 top- 下移 top+