js 之三 鼠标和键盘事件处理
鼠标和键盘事件
鼠标常见的事件，按下onmousedown，拖动onmounsemove，松开onmousevtup，滚轮等事件；
开发需求： 当鼠标点击控件，进行拖拽，控件跟随鼠标移动；
拖拽事件需求的实现思路分析：
1 首先鼠标选中对象，然后拖动按下鼠标时，触发事件onmousedown;
2 当鼠标移动的时候，被拖车元素跟鼠标移动onmounsemove，改事件在onmousedown中；
获取事件对象坐标；然后赋值给对象的坐标，进行移动；
var left=event.clientX-ol;
var top=event.clientY-al;
obj.style.left=left+"px";
obj.style.top=top+"px";
当鼠标松开是，被拖车元素固定在当前位置onmousevtup
触发事件；释放移动和按下的事件
domcument.onmounsemove=null
domcument.onmounsedown=null
代码如下：
function move (obj){
obj.onmousedown=function (event){
event=event || window.event
// if (obj.setPointerCapture){
// obj.setPointerCapture();}
//事件对象位置减去对象的位置
var ol= event.clientX-obj.offsetLeft
var al=event.clientY-obj.offsetTop
//然后执行移动事件对象，必须是document事件
document.onmousemove=function (event){
//浏览器兼容性问题
event=event || window.event
// 或者当前坐标
var left=event.clientX-ol;
var top=event.clientY-al;
obj.style.left=left+"px";
obj.style.top=top+"px";
}}
//给document绑定一个松开鼠标的事件
document.onmouseup=function (){
//首先释放document的移动事件
document.onmousemove=null
//并取消document的按键事件
document.onmousedown=null
// obj.releasePointerCapture && obj.releasePointerCapture()
}
//解决问题自动去浏览器进行搜索的问题
return false;
//设置btn01对鼠标的按下相关的事件进行捕获，当调用
}
window.onload=function () {
/*
拖拽事件的实现思路分析： 首先鼠标选中对象，然后拖动按下鼠标时，触发事件；onmousedown;
当鼠标移动的时候，被拖车元素跟鼠标移动onmounsemove
当鼠标松开是，被拖车元素固定在当前位置onmousevtup
*/
box1 = document.getElementById('box1')
box2 = document.getElementById('box2')
//当鼠标正在被拖拽元素按下时，触发onmousedown
move(box1);
move(box2);
}
键盘事件：
onkeydown 键盘按下，onkeyup 键盘松开，键盘事件一般绑定在焦点的对象或者document
1 判断键盘条件经常使用keycode
if(event.keycode===89) 判断键盘是否按下y，当然首先要触发键盘按下事件，然后
<script type="text/javascript">
// 键盘事件
// onkeydown按键被按下，如果一直按着不松手事件会一直触发
// onkeyup按键被松开
// 详见https://www.runoob.com/jsref/dom-obj-event.html
// 键盘事件一般都绑定给一些可获取焦点的对象或者是document
window.onload=function (){
// document.onkeydown=function (event){
// event=event || window.event
// //可以通过keycode 获取编码；
// //altCode;ctrlCode;shiftCode;获取编码
// //
// if (event.keyCode===89)
// {
// console.log("你按的是y")
// }
// //同时按键的判断ctrl+y的判断
// if (event.keyCode===89 && event.ctrlKey){
// console.log("同时按住ctrl+y")
// }
//
// }
var input=document.getElementsByTagName('input')[0]
input.onkeydown=function (event){
event=event || window.event
console.log(event.keyCode)
if (event.keyCode>=96 && event.keyCode<=107){
//不符合条件，回调函数返回false
return false
}
}
}
</script>
</head>
<body>
<input type="text" id="input" value="" />
</body>
</html>
功能开发练习
用键盘上下左右控制div的移动
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: #0a0c0d;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload=function (){
var box1= document.getElementById('box1')
document.onkeydown=function (event){
//浏览器兼容性问题
event=event||window.event
var speed = 10;
console.log(event.keyCode)
if (event.ctrlKey){
speed=40;
}
switch (event.keyCode){
case 37:
console.log(event.keyCode)
box1.style.left=box1.offsetLeft - speed + "px";
break;
case 38:
console.log(event.keyCode)
box1.style.top=box1.offsetTop - speed + "px";
break;
case 39:
console.log(event.keyCode)
box1.style.left=box1.offsetLeft + speed + "px";
break;
case 40: box1.style.top=box1.offsetTop + speed + "px"; break;
}
}
}
</script>
