如何擷取event事件？
事件對象需要作為參數傳入事件。
function fn(event){
console.log(event)
}
或者
function(){
console.log(arguments[0])
}
缺德定律再現！
IE中： window.event
正常浏覽器中： 對象.on事件 = function(event){}
相容方式：
function fn(eve){
var e = eve || window.event;
}
檢測按下的滑鼠按鍵：event.button
傳回值為0，左鍵；傳回值為1，中鍵；傳回值為2，右鍵
檢測相對于浏覽器的位置：clientX和clientY
當滑鼠事件發生時，滑鼠相對于浏覽器左上角的位置
檢測相對于文檔的位置：pageX和pageY
當滑鼠事件發生時，滑鼠相對于文檔左上角的位置。（IE7/8無）（類似于event.clientX和event.clientY）
檢測相對于螢幕的位置：screenX和screenY
當滑鼠事件發生時，滑鼠相對于螢幕左上角的位置
檢測相對于事件源的位置：offsetX和offsetY
當滑鼠事件發生時，滑鼠相對于事件發生元素左上角的位置
.鍵盤事件（keyup／keydown／keypress）
鍵盤事件：
onkeydown 鍵盤按下
onkeyup 鍵盤擡起
onkeypress 按下并擡起數字字母按鍵
得知按下的鍵盤上的哪個鍵：keyCode
event.keyCode 傳回目前按鍵的ASCII碼
空格 32
回車 13
左 37
上 38
右 39
下 40
相容問題： var eve = eve || window.event
var keyC = eve.keyCode || eve.which
案例：通過鍵盤上下左右，控制頁面中的元素位置移動
ctrlKey 判斷ctrl是否被按下，按下傳回true
shiftKey 判斷shift是否被按下，按下傳回true
altKey 判斷alt是否被按下，按下傳回true
oncontextmenu 滑鼠右鍵事件
如何阻止預設事件？
e.preventDefault();
window.event.returnValue = false;
處理相容方式
if( e.preventDefault ){
e.preventDefault();
}else{
window.event.returnValue = false;
}
.滑鼠拖拽效果（onmousedown／onmousemove／onmouseup）
拖拽分解：
按下滑鼠 ----> 移動滑鼠 ----> 松開滑鼠
1.給目标元素添加onmousedown事件，拖拽的前提是在目标元素按下滑鼠左鍵
2.當onmousedown發生以後，此刻給document添加onmousemove事件，意味着此刻滑鼠在網頁的移動都将改變目标元素的位置
3.在onmousemove事件中，設定目标元素的left和top，
公式
目标元素的left = 滑鼠的clientX – （滑鼠和元素的橫坐标差，即offsetX）
目标元素的top = 滑鼠的clientY– （滑鼠和元素的縱坐标差，即offsetY）
4.當onmousedown發生以後，此刻給document添加onmouseup事件，意味着此刻滑鼠在網頁的任意位置松開滑鼠，都會放棄拖拽的效果
在onmouseup事件中，取消document的onmousemove事件即可。
事件觸發階段主要由于事件流：DOM0級事件處理階段和DOM2級事件處理；
DOM0級事件處理，是一種指派方式，是被所有浏覽器所支援的，簡單易懂容易操作；
元素.onclick = function(){}
DOM2級事件處理是所有DOM節點中的方法，可以重複綁定，但是浏覽器相容存在問題；
非IE下：(這裡的事件名不帶on),第三個參數表示是在捕獲階段還是冒泡階段。可以重複綁定事件，執行順序按照綁定順序來執行。
oDiv.addEventListener('click',fn,false);
oDiv.removeEventListener('click',fn ,false);
IE下：
隻有冒泡階段,是以沒有第三個參數；（這裡的事件名需要加on）
oDiv.attachEvent()；
oDiv.detachEvent() ;
冒泡：從下往上（從裡往外）
捕獲：從上往下（從外往内）
相容問題解決：
1.封裝成對象的方式
var EventUtil={
addHandler:function(DOM,EventType,fn){
if(DOM.addEventListener){
DOM.addEventListener(EventType,fn,false);
}else if(DOM.attachEvent){
DOM.attachEvent('on'+EventType,fn)
}else{
DOM['on'+EventType]=fn
}
},
removeHandler:function(DOM,EventType,fn){
if(DOM.removeEventListener){
DOM.removeEventListener(EventType,fn,false)
}else if(DOM.detachEvent){
DOM.detachEvent('on'+EventType,fn)
}else{
DOM['on'+EventType]=null;
}
}
}