target
event.target：指的是真实触发事件的元素，指出那个触发的
addEventListener(事件类型(字符串),事件类型(字符串),true/false 就写false，)
removeEventListener(事件类型(字符串),事件类型(字符串),true/false 就写false，)
//推荐使用addEventListener
键盘事件
onkeydown : 当键盘按键按下的时候触发
onkeyup : 当键盘按键抬起的时候触发
event.keyCode : 数字类型 键盘按键的值 键值
上下左右移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
height: 100px;
width: 100px;
background: red;
position: absolute;
top: 300px;
left: 300px;
}
</style>
</head>
<body>
<div id="div1"></div>
<script>
var div = document.getElementById('div1');
window.addEventListener('keydown', function(ev){
// 左:37 上: 38 右: 39 右: 40
if(ev.keyCode===37){//左
var left = div.offsetLeft;
left-=10;
div.style.left = left + 'px';
}
else if(ev.keyCode===38){//上
var _top = div.offsetTop;
_top-=10;
div.style.top = _top + 'px';
}
else if(ev.keyCode===39){//右
var left = div.offsetLeft;
left+=10;
div.style.left = left + 'px';
}
else if(ev.keyCode===40){//右
var _top = div.offsetTop;
_top+=10;
div.style.top = _top + 'px';
}
},false);
</script>
</body>
</html>
event.ctrlKey, event.shiftKey, event.altKey
当一个事件发生的时候，如果ctrl || shift || alt 是按下的状态，相应的属性值返回true，否则返回false
至于能够接收焦点的元素才能够接收键盘事件（input）
阻止默认行为
event.preventDefault();
右键菜单事件oncontextmenu
右键菜单事件，当右键菜单（环境菜单）显示出来的时候
触发可以自定义右键菜单栏
拖拽
onmousedown : 选择元素（鼠标按下）
onmousemove : 移动元素（鼠标移动）
onmouseup : 释放元素（鼠标放开）
拖拽的问题
如果要拖拽图片，需要清除默认行为######event.preventDefault();如果拖动2个重合过后，需要把######mousemove和mouseup的事件添加给window消除影响
拖拽的范围
function onMousemove(ev){
ev.preventDefault();
var _top = ev.clientY - disY;
var left = ev.clientX - disX;
if(left<0){
left = 0;
}
if(_top<0){
_top = 0;
}
if( _top > window.innerHeight-obj.offsetHeight ){
_top = window.innerHeight-obj.offsetHeight;
}
if( left > window.innerWidth-obj.offsetWidth ){
left = window.innerWidth-obj.offsetWidth;
}
obj.style.top = _top + 'px';
obj.style.left = left + 'px';
}
网友评论