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';
}
