1.當(dāng)一個(gè)元素接收到事件的時(shí)候 會(huì)把他接收到的事件傳給自己的父級，一直到window。當(dāng)某個(gè)dom上的事件被觸發(fā)，那么其父級元素的該事件也會(huì)被逐級觸發(fā)。
例子1：
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div2.onclick = function(){console.log(‘我是內(nèi)層div’);};
div1.onclick = function(){console.log(‘我是外層div’);};
<div id="div1">
<div id="div2"></div>
</div>
例子2：去掉例1內(nèi)層div的綁定事件
例子3：將內(nèi)層div通過絕對定位放置于div3內(nèi)
事件冒泡的原理圖：
以上類似一個(gè)dom片段
<body>
<div>
<div>
<div class=”content”>666</div>
</div>
</div>
</body>
每個(gè)dom對象都是嵌套的，形成一個(gè)金字塔形結(jié)構(gòu)，且每個(gè)對象都有諸如onclick屬性
根據(jù)瀏覽器廠商自定規(guī)則，當(dāng)事件觸發(fā)時(shí)會(huì)(比如onclick)收集個(gè)層級對象上的onclick函數(shù)體與參數(shù)形成一個(gè)數(shù)組
[{fn:function(){},org},{fn:function(){},org},null,{fn:function(){},org},null,null]
我們假設(shè)它叫eventArr
然后遍歷eventArr數(shù)組按順序調(diào)用
這就是所謂的事件冒泡，據(jù)上可知，并不會(huì)將dom節(jié)點(diǎn)上的事件函數(shù)‘傳遞’給父級元素，只是會(huì)按順序調(diào)用父級對應(yīng)的事件函數(shù)，如果未綁定，那么就會(huì)略過
2事件捕獲：
將例子1中的事件綁定方式變?yōu)?/p>
dom.addEventListener('click',function(){
console.log('我是內(nèi)層div')
},true);
注意第三個(gè)參數(shù)必須為true
可見其執(zhí)行順序就是從外到內(nèi) 相當(dāng)于按eventArr的正序執(zhí)行個(gè)事件函數(shù)，而事件冒泡是將eventArr倒敘排列后再執(zhí)行
3 DOM****事件流：
事件捕獲階段、處于目標(biāo)階段、事件冒泡階段
事件捕獲從外到內(nèi)收集事件函數(shù)形成eventArr 然后執(zhí)行
將eventArr倒敘排列后 執(zhí)行，第一個(gè)元素的執(zhí)行即為處于目標(biāo)階段，之后的執(zhí)行過程叫事件冒泡，那么我們使用dom.onclick時(shí)如何實(shí)現(xiàn)事件捕獲呢？
4 事件等級：
DOM0級事件時(shí) 微軟（IE）按事件冒泡處理 網(wǎng)景（Netscape）按事件捕獲
DOM1級 只存在于理論上
DOM2級 dom.addEventListener('click',function(){//使用事件監(jiān)聽器進(jìn)行事件綁定
console.log('我是內(nèi)層div')
},true);//第三個(gè)參數(shù)默認(rèn)false（冒泡）傳true的話（捕獲）
DOM2級事件與DOM0事件的不同點(diǎn)
前者靠事件監(jiān)聽器綁定事件，可多次綁定同一類型事件
后者直接綁定，多次綁定會(huì)覆蓋
dom.addEventListener函數(shù)的第一個(gè)參數(shù)為事件名（注意不加on），第二個(gè)參數(shù)為事件函數(shù)，第三個(gè)參數(shù)為冒泡與否
移除事件時(shí)后者置空，前者使用removeEventListener(type,fn,boolean)boolean必須與綁定時(shí)一致
IE瀏覽器的事件監(jiān)聽器attachEvent(‘onclick’,fn)移除事件時(shí)采用detachEvent(‘onclick’,fn)
那么一個(gè)跨瀏覽器的事件綁定移除函數(shù)應(yīng)該這樣書寫
addEvent(elment,type,fn){
if(elment.addEventListener){
}else if(elment.attachEvent){
}else{
}
}
removeEvent(element,type,fn){
if(elment.removeEventListener){
}else if(elment.detachEvent){
}else{
}
}
5事件對象：
兼容DOM的瀏覽器會(huì)將一個(gè)event對象傳入到事件處理程序中。無論指定事件處理程序時(shí)使用DOM0級或是DOM2級，都會(huì)傳入event對象。event對象包含一些特定的屬性和方法，方便我們調(diào)用
target始終指向觸發(fā)事件的dom節(jié)點(diǎn)
currentTarget指向事件函數(shù)綁定的dom節(jié)點(diǎn)
在事件處理程序內(nèi)部，對象this始終等于currentTarget的值，而target則只包含事件觸發(fā)實(shí)際目標(biāo)。如果直接將事件處理程序指定給了目標(biāo)元素，則this、currentTarget、和target包含相同的值。
IE的事件對象：window.event;
其他的：event
目標(biāo)dom IE:event.srcElement; 其他:event.target
target屬性 觸發(fā)事件的dom對象
srcElement屬性 對于生成事件的 Window 對象、Document 對象或 Element 對象的引用
clientX屬性 返回當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針的水平坐標(biāo)
clientY屬性 返回當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針的垂直坐標(biāo)
pageX屬性 與clientX同值
pageY屬性 與clientY同值
建議使用client，兼容性好點(diǎn)
offsetX距離元素左邊框 IE的x相當(dāng)于此值
clientX距離瀏覽器可視區(qū)域 其他瀏覽器的x相當(dāng)于此值
screenX距離屏幕左側(cè)
6 事件類型
焦點(diǎn)事件：focus 元素獲得焦點(diǎn)（不會(huì)冒泡）
blur 元素失去焦點(diǎn)（不會(huì)冒泡）
鼠標(biāo)與滑輪事件：
mouseenter 指針移到有事件監(jiān)聽的元素內(nèi)
mouseover 該事件冒泡
mousemove 指針在元素內(nèi)移動(dòng)時(shí)持續(xù)觸發(fā)
mousedown 在元素上按下任意鼠標(biāo)按鈕
mouseup 在元素上釋放任意鼠標(biāo)按鍵
click 在元素上按下并釋放任意鼠標(biāo)按鍵
dblclick 在元素上雙擊鼠標(biāo)按鈕
contextmenu 右鍵點(diǎn)擊 (右鍵菜單顯示前).
mousewheel 滾輪向任意方向滾動(dòng)
IE、chrome監(jiān)聽的是wheelDelta,向下滾動(dòng)其值為-120； 向上滾動(dòng)其值為120
wheel FF監(jiān)聽的是detail,向下滾動(dòng)其值為3；向上滾動(dòng)其值 為-3
mouseleave 指針移出元素范圍外（不冒泡）
mouseout 指針移出元素，或者移到它的子元素上
鼠標(biāo)按鍵事件會(huì)返回button值
0 規(guī)定鼠標(biāo)左鍵
1 規(guī)定鼠標(biāo)中鍵
2 規(guī)定鼠標(biāo)右鍵
鍵盤事件
鍵盤事件包括keydown(按下鍵盤時(shí)觸發(fā)該事件)，keypress(只要按下的鍵并非Ctrl, Alt, Shift，就接著觸發(fā)keypress事件), keyup(松開鍵盤時(shí)觸發(fā)該事件)
altKey，ctrlKey，shiftKey: 返回一個(gè)布爾值，表示是否按下對應(yīng)的鍵
key: 返回一個(gè)字符串，表示按下的鍵名。如果同時(shí)按下一個(gè)控制鍵和一個(gè)符號鍵，則返回符號鍵的鍵名
keyCode: 返回按鍵的 ASCII 碼，注意: 這里是不區(qū)分大小寫的
文本事件
input 文本框輸入字符時(shí)觸發(fā)
change 文本框內(nèi)容改變時(shí)觸發(fā)
