什么是事件：
事件是交互體驗的核心功能
一．事件冒泡：
當(dāng)一個事件發(fā)生時，這個事件會從內(nèi)向外逐層傳遞揍魂。
二．為什么會有事件冒泡：
因為該事件源本身可能沒有處理該事件的能力，所以事件源會把事件交給父級處理
三．事件捕獲：
事件捕獲和事件冒泡正好是相反的順序
標(biāo)準(zhǔn)瀏覽器：
1.Dom.addEventListener(‘click’,function(){},false);
為dom對象添加一個事件監(jiān)聽器 棚瘟，與直接綁定的方式不同 直接綁定的方式 綁定函數(shù)只執(zhí)行一次
addEventListener()可以多次使用重復(fù)執(zhí)行 這里添加的事件處理程序是在其依副的元素作用域中運行
第一個參數(shù)是事件類型现斋，第二個參數(shù)是回調(diào)函數(shù)（即用來執(zhí)行的代碼），第三個參數(shù)默認(rèn)為false偎蘸，當(dāng)改為true時庄蹋，代表事件捕獲瞬内；
2.Dom.removeEventListener('click',function(){});
為dom對象移除監(jiān)聽器，用addEventListener（）綁定的事件只能用removeEventListener（）解除
removeEventListener（）第一個參數(shù)是事件類型限书，第二個是要移除的回調(diào)函數(shù)
IE瀏覽器：
dom.attachEvent(‘onclick’,function(){})
dom.detachEvent(‘onclick’,function(){})
在使用attachEvent()方法的情況下虫蝶，事件處理程序在全局作用域下運行，其中的this等于window倦西。并且用attachEvent（）添加的這些事件處理程序不是以添加他們的順序執(zhí)行秉扑，而是以相反的順序觸發(fā)
語句綁定的方式：
Btn.onclick=function(){…};//綁定
Btn.onckick-null;//解除綁定
eg：
var EventUtil = {
addHandler: function(element,type,handler) {
if(element.addEventListener) {
element.addEventListener(type,handler,false);
}else if(element.attachEvent) {
element.attachEvent("on"+type,handler);
}else {
element["on" +type] = handler;
}
},
removeHandler: function(element,type,handler){
if(element.removeEventListener) {
element.removeEventListener(type,handler,false);
}else if(element.detachEvent) {
element.detachEvent("on"+type,handler);
}else {
element["on" +type] = null;
}
}
};
兩種綁定事件的區(qū)別：
句柄綁定：當(dāng)前this指向當(dāng)前節(jié)點 支持事件冒泡 不能重復(fù)綁定 重復(fù)綁定會導(dǎo)致覆蓋
監(jiān)聽器綁定：當(dāng)前this指向當(dāng)前元素 支持事件冒泡和捕獲 可以重復(fù)多次進行事件綁定
ie事件綁定：當(dāng)前this不指向當(dāng)前元素 不支持事件捕獲 可以重復(fù)多次進行事件綁定
三．currentTarget與target：
currentTarget等于this，target等于當(dāng)前元素
例如：點擊了button按鈕 但是當(dāng)按鈕沒有綁定點擊事件時該事件便會冒泡到可以處理該事件的父級中（假定是body）调限，那么此時currentTarget=this=body，target=button误澳。
所以target指向觸發(fā)事件的對象耻矮，currentTarget指向處理事件的對象
四．標(biāo)準(zhǔn)瀏覽器和IE瀏覽器的事件對象：
標(biāo)準(zhǔn)瀏覽器下事件對象是event,打印目標(biāo)對象：event.target
IE瀏覽器下事件對象是window.event，打印目標(biāo)對象：window.event.srcElement
五．阻止對象默認(rèn)行為：
標(biāo)準(zhǔn)瀏覽器：event.preventDefault（）忆谓；
IE瀏覽器：window.event.returnValue=false;
六．阻止事件冒泡：
標(biāo)準(zhǔn)瀏覽器：event.stopPropagation();
IE瀏覽器：window.event.cancel.Bubble=true裆装；
Eg：
varEventUtil = {
addHandler:function(element,type,handler) {
if(element.addEventListener) {
element.addEventListener(type,handler,false);
}elseif(element.attachEvent) {
element.attachEvent("on"+type,handler);
}else{
element["on" +type] = handler;
}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener) {
element.removeEventListener(type,handler,false);
}elseif(element.detachEvent) {
element.detachEvent("on"+type,handler);
}else{
element["on" +type] =null;
}
},
getEvent:function(event) {
returnevent ? event : window.event;
},
getTarget:function(event) {
returnevent.target || event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault) {
event.preventDefault();
}else{
event.returnValue =false;
}
},
stopPropagation:function(event) {
if(event.stopPropagation) {
event.stopPropagation();
}else{
event.cancelBubble =true;
}
}
};
七．焦點事件：
blur：在元素失去焦點時觸發(fā)，這個事件不會冒泡倡缠，所有瀏覽器都支持哨免。
foucs：在元素獲得焦點時觸發(fā)，這個事件不會冒泡昙沦，所有瀏覽器都支持琢唾。
八．鼠標(biāo)事件：
1.click事件：在用戶單擊鼠標(biāo)按鈕或者按下回車鍵觸發(fā)；
2.dblclick事件：在用戶雙擊鼠標(biāo)按鈕時被觸發(fā)盾饮；
3.mousedown事件：在用戶按下了任意鼠標(biāo)按鈕時被觸發(fā)采桃，mousedown的事件對象中有一個屬性叫做button枕稀，這個屬性的值是0的時候代表我們按下的是左鍵树肃，1的時候代表按下的中鍵辩蛋，2的時候代表按下的是右鍵脸秽。
4.mouseenter事件：在鼠標(biāo)光標(biāo)從元素外部移動到元素范圍之內(nèi)被觸發(fā)
5.mousemove事件：當(dāng)鼠標(biāo)指針在元素內(nèi)部移動時重復(fù)地觸發(fā)澳淑。
6.mouseout事件：用戶將其移入另一個元素內(nèi)被觸發(fā)臭胜。
7.mouseover事件：鼠標(biāo)指針在元素外部还最，用戶將移入另一個元素的邊界時觸發(fā)芭逝，感覺和mouseenter事件類似呈础；
8.mouseup事件：用戶釋放鼠標(biāo)按鈕時觸發(fā)舆驶；
除了mouseenter和mouseleave，所有鼠標(biāo)事件都會冒泡
所有的鼠標(biāo)事件都有clientX和clientY而钞，代表的是鼠標(biāo)點擊的位置贞远，我們可以通過e.clientX和e.clentY來查看。
Eg：
拖拽事件的實現(xiàn)：
var div = document.getElementsByTagName('div')[0]
function drag(elem) {
var disX,
dixY;
addEvent(elem, 'mousedown', function (e) {
var event = e || window.event;
disX = event.clientX - parseInt(getStyle(elem, 'left'));
disY = event.clientY - parseInt(getStyle(elem, 'top'));
addEvent(document, 'mousemove', mouseMove);
addEvent(document, 'mouseup', mouseUp);
stopBubble(e);
cancelHandler(e);
});
function mouseMove(e) {
var event = e || window.event;
elem.style.left = event.clientX - disX + 'px';
elem.style.top = event.clientY - disY + 'px';
}
function mouseUp (e) {
removeEvent(document, 'mousemove', mouseMove);
removeEvent(document, 'mouseup', arguments.callee);
}
}
九．事件委托：
利用事件源對象和事件冒泡來處理的方式就叫做事件委托笨忌。
十．事件委托的優(yōu)點：
1.性能不需要循環(huán)所有的子元素一個個綁定事件
2.靈活當(dāng)有新的子元素被加入的時候不需要重新綁定事件
十一.鍵盤事件：
當(dāng)用戶按下鍵盤時鍵盤的觸發(fā)順序分別是keydown蓝仲、keypress、keyup。
keydown和keypress：
1.相同點：
當(dāng)用戶按住鍵盤不放時兩者會一直響應(yīng)下去
keyCode和which每個方法都有袱结，表示的是這個鍵的唯一標(biāo)示亮隙，可以告訴瀏覽器我們按下的是鍵盤上的哪一個鍵，比如空格是32垢夹，32就代表空格溢吻。不過我們一般都用which，keyCode用的較少果元。
2.不同點：
keydown可以響應(yīng)所有按鍵促王，keypress只響應(yīng)字符按鍵（即有ascii碼的按鍵）
keypress有charCode屬性這個屬性代表這個字符的ASCII碼，配合SHIFT之類的按鍵可以直接獲取大寫字母等而晒。
String上有一個方法叫做fromCharCode蝇狼，可以接受一個Unicode值（包含ASCII值），然后返回對應(yīng)的字符串倡怎，我們可以配合這個方法和charCode來直接獲取輸入的字符迅耘。
